为了做移动适配,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);
}