前端开发终端适配方案

字数 1536阅读 5701

一些基本概念

视窗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{width:2rem; height:2rem;}

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

前端适配

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

@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了,这个切图保证在所有设备都清晰显示。

推荐阅读更多精彩内容