移动端屏幕适配问题
2016-09-01 15:03 平凡故事 阅读(264) 评论(0) 编辑 收藏 举报为了做移动适配，css3出了一个新单位rem，rem就是相对于根元素<html>的font-size来做计算，根目录一般用20px（一是方便计算，二是谷歌浏览器不支持12px以下的字体）；
html{font-size：20px}，默认为20px；
@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
font-size: 50px;
}
}
意思就是屏幕的尺寸在992px和1220px范围内html的字体大小就采用50px；根据实际情况举一反三列出主流的屏幕尺寸就可以，如果觉得不够严谨就可以用js动态设置html的字体大小；
<script>
document.getElementsByTagName('html')[0].style.fontSize=window.innerWidth/10+'px';
</script>
10也可以换做其他，取10是为了方便计算；
如果觉得单位换算麻烦，可以采用less或者sass等预处理器去完成；当然，单位方面也可以采用vw或vh去进行计算，1vw就是屏幕宽度的1%；1vh就是屏幕高度的1%；
布局方面可以用flex布局；
移动开发常常出现的几个问题及解决办法：
一：高清图片处理
img 100px *100px
高清屏 200dp*200dp 渲染模糊，dpr=2的情况下
解决办法 50px *50px 得到正确结果
二：一像素边框
同样是高清屏下的问题，根本原因是1px使用2dp来渲染
border：0.5px 这种写法仅在ios8可以起作用；
解决方案：
.sidebar .folder li{position:relative}
.folder li+li:before{
position:absolute;
top:-1px;
left:0;
content:'';
width:100%;
height:1px;
border-top:1px solid #ddd;
-webkit-transform:scaleY(0.5);
}
