移动端适配理解收集

移动端相应式测试网站：http://kuapingce.com/

http://www.cnblogs.com/Charliexie/p/6900640.html

https://segmentfault.com/a/1190000008767416

移动前端开发之viewport的深入理解

https://www.cnblogs.com/2050/p/3877280.html

http://www.jianshu.com/p/84c5cb3a485a

一些基本概念

视窗viewport

物理像素

设备像素，它是显示设备中的一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
对于前端来说：假设设计稿为750px。如果这个设备正好能完整显示750px宽度的设计稿。那么设备像素或者称物理像素就是750px。但是可能这个设备的实际宽度就375px。

设备独立像素

也称密度无关像素。可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如css像素），然后由相关系统转换为物理像素。
对于前端来说：比如ip6的设备独立像素是375px

css像素

css像素是一个抽象的单位。主要用在浏览器上。
对于前端来说：设计稿多少像素就是多少像素。

屏幕密度

指一个设备表面上存在的像素数量。一般是用一英寸有多少像素来计算（PPI）

设备像素比（device pixel ratio，dpr）

设备像素比 = 物理像素/设备独立像素
比如，iphone6的物理像素是750，设备独立像素是375，那么它的dpr是2

在javascript中，可以通过window.devicePixelRatio获取当前设备的dpr
在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio来进行媒体查询

柠檬俱乐部前端适配方案

以iPhone6为处理标准。
视觉稿的宽度为750px
把根元素html的font-size设置为50px，这样1rem=50px(设为50是为了便于计算)
html{font-size:50px;}
那么页面的宽度为15rem
以这样的规则去计算页面各元素的宽高
比如一个图片的宽高为100*100
那么样式写为

img{2rem; height:2rem;}

即以iphone6为基准计算出各元素的rem。

前端适配

关于字体大小的处理，用了以设备独立像素为判断准则的媒体查询

@media screen and (min-320px) {
html {
  font-size: 21.33px
}
body {
  font-size: 12px
}
}

@media screen and (min-360px) {
html {
  font-size: 24px
}
body {
  font-size: 12px
}
}

@media screen and (min-375px) {
html {
  font-size: 25px
}
body {
  font-size: 12px
}
}

@media screen and (min-384px) {
html {
  font-size: 25.6px
}
body {
  font-size: 14px
}
}

@media screen and (min-400px) {
html {
  font-size: 26.67px
}
body {
  font-size: 14px
}
}

@media screen and (min-414px) {
html {
  font-size: 27.6px
}
body {
  font-size: 14px
}
}

@media screen and (min-424px) {
html {
  font-size: 28.27px
}
body {
  font-size: 14px
}
}

@media screen and (min-480px) {
html {
  font-size: 32px
}
body {
  font-size: 15.36px
}
}

@media screen and (min-540px) {
html {
  font-size: 36px
}
body {
   font-size: 17.28px
}
}

@media screen and (min-720px) {
html {
  font-size: 48px  
}
body {
  font-size: 23.04px
}
}

@media screen and (min-750px) {
html {
  font-size: 50px
}
body {
  font-size: 24px
}
}

在以上媒体查询处理中，对应宽度下的根元素html都设置了不一样的font-size
比如当width为550px的时候，font-size为36px。那么在这样的情况下，刚刚在上面举例的那个img元素在页面宽度为550px的情况下显示出来的真是宽度应该是72px。
这个方案里，处理方式与dpr无关
这个方案的缺点是，用媒体查询去决定html的font-size，在这样的情况下，计算是不精确的，只能保证大体上按比例正常显示页面。这样并不是完全按照以iphone6为基准的按比例计算。
比如，550px页面宽度的时候，font-size，如果按照比例来说应该是50/750*550约等于36.67
600px页面宽度的时候，font-size应该为40px
而按照这套方案来看页面宽度为540px至719px的时候font-size都为36px
这只能保证在某范围内大致的展示，并不精确，而这个大致的值的选取也是各有各的看法。
所以，以上代码中给出的11个范围下的font-size不一定是合适的，这11个width范围也不一定合适，实际有可能不需要这么多，所以找出这些个范围，以及每个范围最合适的font-size也很麻烦。

网易的适配方案

首先网易使用的是640px的设计稿
应该是以iphone4或者iphone5为基准来设计的
网易用来算rem的基准是100
所以当宽度是640px=6.4rem

网易的适配方案中，动态计算了html的font-size
deviceWidth=320，font-size=320/6.4=50px---即
320/640*100pxdeviceWidth=375，
font-size=375/6.4=58.5975px
以此类推的计算
通过document.documentElement.clientWidth取得deviceWidth，然后动态计算html的font-size

如果采用这种方法，注意

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

因为这个方法与dpr无关，只是根据设备独立像素来计算了当前的基准font-size

lib-flxible 前端开发终端适配方案--手淘的适配方案

手淘的lib-flexible库

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

实现思路
执行这个js后，会在html（也就是document.documentElement）上增加一个data-dpr属性，以及font-size样式。页面初始时会给meta的viewport动态的给定scale

之后页面中的元素，都可以用rem单位来设置。html上的font-size就是rem的基准像素。

flexible将设计稿分成100份，即100a，10a=1rem。
比如，页面宽度为750px，那么一份为75px，1rem=75px。
这样将html的样式设置为

<html style='font-size:75px;'>

font-size的计算方法：根元素html的font-size的计算方式是物理像素/10。

所以它的计算方式是与dpr有关，也就能比较精确的计算出当前宽度下的根元素html的font-size。能保证比较精确的按比例去展示页面。
比如iphone 6 plus，其dpr为3，设备独立像素为414，所以，在iphone 6 plus下，html的font-size应该为，414*3/10=124.2px

字体大小不用rem，而是根据dpr来设置px

div{font-size:12px;}
[data-dpr='2']div{font-size:24px;}
[data-dpr='3']div{font-size:36px;}

如果在，meta viewport中手动设置了initial-dpr，那么不管js获取到的dpr是多少，都会强制认为dpr是手动设置的值
所以不建议手动设置dpr的值

切图（这里指的图真的是图，需要被缩放的）的时候，要放大1.5倍切，因为现在市面上也有不少像魅蓝note这种超高清屏幕，devicePixelRatio已经达到3了，这个切图保证在所有设备都清晰显示。



作者：SuperSnail
链接：http://www.jianshu.com/p/84c5cb3a485a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zwjun/p/7599455.html