移动端适配理解收集

时间 2019-11-17

标签移动适配理解收集栏目无线繁體版

原文原文链接

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

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

https://segmentfault.com/a/1190000008767416

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

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

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

一些基本概念

视窗viewport

物理像素

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

设备独立像素

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

css像素

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

屏幕密度

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

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

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

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

柠檬俱乐部前端适配方案

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

img{width:2rem; height:2rem;}

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

前端适配

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

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

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

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

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

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

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

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

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

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

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

@media screen and (min-width: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 來源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。