通用性手机端样式:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*全屏*/
}

特定手机端高度样式:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的机器设备}

依据不一样的机器设备设置的样式:

@media (min-width: 768px){ //>=768的机器设备 }
@media (min-width: 992px){ //>=992的机器设备 }
@media (min-width: 1200){ //>=1200的机器设备 }

留意下次序,假如你将@media (min-width: 768px)写在了下边那麼很不幸,由于css文件是以上到下载入的,后边的css优先会高些

@media (min-width: 1200){ //>=1200的机器设备 }
@media (min-width: 992px){ //>=992的机器设备 }
@media (min-width: 768px){ //>=768的机器设备 }

由于如果是1440,因为1440>768那麼你的1200便会无效。

因此 大家用min-width时,小的放上边大的在下面,同样如果是用max-width那麼便是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的机器设备 }
@media (max-width: 991px){ //<=991的机器设备 }
@media (max-width: 767px){ //<=768的机器设备 }
 

另附一个小事例

<style type="text/css">
@media (max-width: 768px){
.change{
height: 100%;
float: right;
margin: 15px;
}
}
@media (min-width: 768px){
.change{
display: none;
}
}

能够见到依据显示屏尺寸的转变,上边导航条也随着出現转变,最终导航条的全部内容都进到到一个右上方的按键中来到。
这一demo非常简单,仅仅用来纪录一下自身第一个响应式demo

关键留意的英语的语法是:

1、@media (max-width : 768 px){
CSS code;

//
“max-width 極限总宽:768px”关键表明在这里控制总宽低于768px才实行以下CSS code代码块,不然就照本来已存有CSS程序运行。
“min-width 最小宽度: 768px”关键表明在这里控制总宽在超过768px才实行以下CSS code块。
2、
col-sm-6 col-md-4 col-lg-3
关键意味着了bootstrap栅格系统,分别是相匹配不一样小,中,显示屏不一样的栅格数据遍布(猖狂别分有两个,4个,3个,最少为一个)
 

之上便是@media手机端响应式样式的操作方法详细介绍的所有内容,期待对大伙儿的学习培训和处理疑惑有一定的协助,也期待大伙儿多多的适用。