移动端适配总结

1、rem

rem是css3出现后新增的单位，这个单位的大小会根据html元素的fontsize的值自动进行缩放，在w3c上是这样子描述的：“font size of the root element”。相比较px跟em元素，不用说自然是能够自动适配不同的屏幕，这一点对于移动端开发来说十分重要。兼容性方面，移动端自然是支持的，pc端，蛋疼的微软要ie9以上才支持，不过在pc端也不用做什么适配了，以后不好说，目前来说是不用的。

2、物理像素

我们平时说的手机像素，比如iPhone6的屏幕750x1334，就是设备的物理像素，是指屏幕的实际大小，是物理上的，是实际存在的。同等面积下，物理像素越多，显示的效果自然就越清晰，但是人的眼睛对屏幕清晰度的识别有限度，乔布斯当年发布r屏的时候说过，自己去翻一下吧，像素太多，会增加设备的耗电，适量即可，mx4 pro出2k屏的时候，耗电被人吐槽死，好像有点扯远了。总之，物理像素要跟逻辑像素区分开来。

3、逻辑像素

逻辑像素，即软件所能达到的像素。逻辑像素可以认为是计算机定的一个点，这个点跟物理像素之间存在这转换关系，下面即将说到，我感觉我解释的不清楚，这个实际项目就可以感受得到了。

4、设备像素比

设备像素比即devicePixelRatio，设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio，存在着这种对应关系。

我们在适配移动屏幕的时候，经常会写：<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这其中的scale就是用来确定页面的device-width的，确定了device-width之后我们就可以计算出html的fontsize了，计算出fontsize就可以愉快的使用rem作为计算单位了。

以下是阿里的适配方法，动态计算scale的值，设计稿为物理像素大小，需要动态计算scale的值，

var scale = 1 / devicePixelRatio;

document.querySelector("meta[name="viewport"]").setAttribute("content","initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

font-size = deviceWidth / 10

比如设计稿为750，一个75px的控件，fontsize为75px，用rem做单位时就可以这么写了：width:1rem;

阿里的做法计算不方便，但是使用less来写的时候就比较方便了，

//定义一个变量和一个mixin

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size

.px2rem(@name, @px){

    @{name}: @px / @baseFontSize * 1rem;

}

//使用示例：

.container {

    .px2rem(height, 240);

}

//less翻译结果：

.container {

    height: 3.2rem;

}

字体的大小就不推荐使用rem了，直接使用px即可，需要写一点媒体查询进行适配，但是工作量已经很小了

@media screen and (max-width:321px){

    .m-navlist{font-size:15px}

}

@media screen and (min-width:321px) and (max-width:400px){

    .m-navlist{font-size:16px}

}

@media screen and (min-width:400px){

    .m-navlist{font-size:18px}

}

以上就是移动端尺寸适配的一些总结，参考文章：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493324&idx=1&sn=126efc9f0dd3a30169728a2f20527bab&chksm=80f19a04b7861312545429c4a77e18d8de3c0b07e2bc09b1ae54216806c37b33028c1f4ee803&mpshare=1&scene=1&srcid=1026OYYw6W1zURzKfTMC3i7e#rd