不适配
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
要设置 meta 标签,将 css像素 = 设备独立像素- 针对不同的分辨率,要对设计稿中的位图像素,进行相应的缩小,得到我们应该写的px数。
例如:
分辨率为2的设备,设计稿中的位图像素是6px,那么我们写css标签的值时要写成3px
分辨率为3的设备,设计稿中的位图像素是6px,那么我们写css标签的值时要写成2px
【优化】
可以采用媒体查询,动态设置某些属性
例如背景图片的设置:.bg(@url){ background-image: url("@{url}@2x.png"); @media only screen and (-webkit-device-pixel-ratio: 3){ background-image: url("@{url}@3x.png"); } }
适配
viewport适配
目的:就是将设计稿的尺寸变成布局视口的尺寸(利用系统缩放,改变布局视口内css像素的数量,此时 物理像素 / css像素 = 1 )
页面的css标签的px值就是设计稿的值
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<script>
//目的: 将所有设备的布局视口 调整为设计图的尺寸!!!
(function(){
//设计图的尺寸
var targetW = 750;
//拿到布局视口/理想视口的尺寸
var layoutW = document.documentElement.clientWidth;
//缩放的比例
var scale = layoutW/targetW;
//拿到viewport标签
var metaNode = document.querySelector("meta[name=viewport]");
//破坏了完美视口
metaNode.content = `initial-scale=${scale},user-scalable=no,minimum-scale=${scale},maximum-scale=${scale}`
})()
</script>
优点:所量即所得
缺点:破坏了完美视口
rem适配
一般浏览器的字体大小为16px,1 font-size = 16px = 1 rem
所以 750px = 750 (屏幕宽度)/ 16 rem
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
@rem : 1rem 应该占据多少个位图像素
<style type="text/less">
@rem:750/16rem;
.box{
width:12/@rem
}
</style>
<script>
//目的: 将所有设备的布局视口 调整为16rem
//包括设计图 也以16rem来衡量
(function(){
var styleNode = document.createElement("style");
var w = document.documentElement.clientWidth/16;
styleNode.innerHTML = `html{font-size:${w}px!important}`;
document.head.appendChild(styleNode)
})()
</script>
优点:没有破坏完美视口
缺点:px 到 rem 的转换较复杂
1px
@media 这个方案,适用于 :不适配和rem适配,由于 viewport 适配应用了系统缩放,破坏了完美视口,物理像素与css像素不存在比率关系了,所以不能用 @media 这个方案;但是viewport 适配,一般直接写1px。
1条border:
.one-px(@color){
position: relative;
&:after{
content: "";
display: block;
width: 100%;
height: 1px;
background: @color;
position: absolute;
bottom: 0;
transform: scaleY(.5);
@media only screen and (-webkit-device-pixel-ratio: 3){
transform: scaleY(.33333333);
}
}
}
---------------------
.navs{
.one-px(black);
... ...
... ...
}
4条border:
.setBorderAll{
position: relative;
&:after{
content:" ";
position:absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #E5E5E5;
border-radius: 4px;
}
}