首先我们在使用Media的时候需要设置下面这段代码,来兼容移动设备的展示效果
准备工作1:设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
代码参数解释:
- width = device-width 宽度等于当前设备的宽度
- initial-scale = 1.0 初始缩放比例(默认1.0)
- maximum-scale = 1.0 允许用户缩放到最大比例(默认1.0)
- minimum-scale = 1.0 允许用户缩放到最小比例(默认1.0)
准备工作2:加载兼容js文件
因为IE8既不支持HTML5也不支持CSS3的Media,所以我们需要加载两个js文件,来保证我们实现兼容效果
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3:设置IE的渲染方式默认为最高(可选)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
还有一个更好的写法
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这段代码后面加了一个chrome=1,这个谷歌内嵌浏览器框架GCF,如果用户电脑里面装了chrome的插件,那就可以让电脑里面的IE不管是哪个版本都可以使用Webit引擎以及V8引擎进行排版及运算,无比给力,不过用户要是没装这个插件,那这段代码就会让IE以最高的文档模式展现,建议加上。
进入CSS3 Media写法:
@media screen and (max-width: 960px){
body{
background: #ccc;
}
}
这算是一个Media的标准写法,代码意思是:当页面小于960px的时候执行下面的代码
当浏览器尺寸大于960px的时候代码
@media screen and (min-width:960px){
body{
background:orange;
}
}
我们还可以混合使用上面的用法:
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
这段代码的意思就是页面宽度大于960px小于1200px的时候执行下面代码
设备像素比(关于手机端1像素大小不一的问题)
在实际开发中,有时候写的是1px,但是手机上看起来是2px,有很多种方法可以解决,通过transform: sacleY() 可以实现,也有通过背景图,viewport实现的
下面是通过transform来实现手机端的1像素,用的stylus语法
border-t-1px($color) //border-top
position: relative
&::before
display: block
position: absolute
left:0
top:0
width:100%
border-top:1px solid $color
content:' '
border-b-1px($color) //border-bottom
position: relative
&::after
display: block
position: absolute
left:0
bottom:0
width:100%
border-top:1px solid $color
content:' '
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
.border-t-1px
&::before
-webkit-transform: scaleY(0.7)
transform:scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
.border-t-1px
&::before
-webkit-transform: scaleY(0.5)
transform:scaleY(0.5)
@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
.border-t-1px
&::before
-webkit-transform: scaleY(0.4)
transform:scaleY(0.33333334)
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
.border-b-1px
&::after
-webkit-transform: scaleY(0.7)
transform:scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
.border-b-1px
&::after
-webkit-transform: scaleY(0.5)
transform:scaleY(0.5)
@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
.border-b-1px
&::after
-webkit-transform: scaleY(0.4)
transform:scaleY(0.4)