一次搞清楚挪动端这几个坑爹的单位慨念

目次:

• 一、让坑爹的单位,不再坑爹
• 二、需要预备什么样的设想稿

• 三、rem计划的道理和细节

  • 高清屏上,位图的处置惩罚
  • 高清屏上,关于border: 1px的处置惩罚
  • 挪动端屏幕的自动适配的处置惩罚
  • 挪动端屏幕上字体大小的处置惩罚

一、让坑爹的单位,不再坑爹

挪动端适配自身不难,然则因为涉及到单位转换,想要诠释清楚挪动端适配计划,你必需要搞清楚各个单位的慨念。

然则因为中英翻译的题目,我发明许多文章在解说挪动端适配时,关于单位,我们有一万种翻译要领…

“物理像素、逻辑像素、物理分辨率、逻辑分辨率、现实像素、css像素、装备像素、ppi、pt、dpr。”

真的是给我们新手进修挪动端适配形成不少疑心,英语真的很主要呀。下面分享一下,我以为最靠谱最需要明白的4个慨念。

引荐把这4个名词记着,我以为翻译的很贴切,好明白。

• 物理像素(physical pixel) : 显现器上最小的物理显现单位,苹果的retina屏幕很清楚吧?就是因为它的物理像素很高。
• 装备自力像素(density-independent pixel) : 这个是盘算机坐标体系里的假造慨念,这个点代表一个可以由顺序运用的假造像素(比方: css像素)
• 装备像素比(device pixel ratio) : 也叫dpr。 装备像素比 = 物理像素 / 装备自力像素 。你也可以经由过程window.devicePixelRatio猎取装备像素比
• 位图像素 : png, jpg, gif这类都是位图,位图像素就是位图的最小数据单位

举个栗子

以iphone6来讲,

• 物理像素分辨率: 750 * 1334
• 装备自力像素分辨率 : 375 * 667
• 装备像素比: 2

不论是高清屏幕照样平常屏幕,一个11 css像素那末大的物理尺寸是一样的,区分在于高清屏上一个一个11 css像素那末大的处所,对应2*2个物理像素,所以很清楚。

在平常屏幕下1个css像素(11)对应1个物理像素(11)

在高清屏幕下1个css像素(11)对应4个物理像素(22)

不晓得看完这个例子,你是否能明白这些叫法的区分。假如照样有些含糊,可以看下面的补充申明 ; 假如已相识,可以跳过下面一小节。

关于这4个叫法的补充申明:

• 物理像素(physical pixel): 物理像素越大,屏幕越清楚。
• 装备自力像素(density-independent pixel) : 也叫密度无关像素。这个装备自力像素,就是你眼睛看到的手机大小有关。

2个手机看上去一样大? 那他们装备自力自力像素就是一样的。也就是说我不论你高清屏照样什么**屏装备自力像素只跟我这个装备看上去大不大有关。

装备看上去很大? 那装备自力像素就大 ; 装备看上去很小? 那装备自力像素就小

所以我以为装备自力像素(density-independent pixel)。这个翻译比较贴切也好明白。只跟装备看上去的大小相干。

许多翻译也管装备自力像素叫做: 逻辑像素 、 css像素 、 现实像素…

二、需要预备什么样的设想稿

• 起首，拔取一款手机的屏幕宽高作为基准(之前是iphone4的320×480，如今更多的是iphone6的375×667)。
• 关于retina屏幕(如: dpr=2)，为了到达高清结果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是本来的4倍（对iphone6而言：本来的375×667，就会变成750×1334）。

三、rem计划的道理和细节

rem计划的道理:

让需要动态变化的规划、图片的单位都用rem来写。比方width: 2rem

那末2rem终究示意若干呢? 这个和根元素html的font-size属性相干, 比方font-size为75px,那末 2rem 就示意150px

所以只需html的font-size可以依据屏幕的尺寸和dpr动态的变化,那末一切以rem为单位的元素都邑动态变化。

这个就是rem可以适配的基本道理。至于屏幕的尺寸和dpr都是可以经由过程js或许css猎取的。

细节1: 高清屏上,位图的处置惩罚

罕见的位图,包含png / jpg / gif范例的图片。只要一个位图像素对应一个物理像素时,位图才会被高质量的显现

所以罕见的题目就是: png图片在平常屏幕上平常显现,然则在高清屏上,会涌现位图像素不够的状况,致使图片隐约。

所以实在比较好的解决计划就是:

• 在依据差别的dpr,显现差别的位图。
• 另一个就是可以不必位图,改用矢量图、字体图标、转成base64。不必位图天然就没有位图的题目了。

细节2: 高清屏上,border: 1px的处置惩罚

实在并非一切做挪动端适配的人,都一定会碰到这个题目。

比方你的设想师给了一张iphone6为基准的 750*1334 的设想稿,内里有一个border标注的是1px。

所以设想师现实上想要的是retina屏下的1px,也就是平常屏幕下的0.5px。

但题目是: 并非手机端屏幕都支撑0.5px,ios7之下或许安卓机都能够把0.5剖析成0px

这里给到一种解决计划: 设置initial-scale=0.5

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

如许，页面中的一切的border: 1px都将减少0.5，从而到达border: 0.5px;的结果。

但是，页面scale，必然会带来一些题目：

• 字体大小会被缩放
• 页面规划会被缩放(如: div的宽高级)

细节3: 挪动端屏幕的自动适配的处置惩罚

rem道理: 依据手机的屏幕尺寸和dpr,动态的修正html的font-size(基准值)

求rem

    1 rem = document.documentElement.clientWidth * dpr / 10
    
   (1) 乘以dpr，是因为页面有能够为了完成1px border页面会缩放(scale) 1/dpr 倍(假如没有，dpr=1),。
   (2) 除以10，是为了取整，轻易盘算(理论上可所以任何值)

求iphone6的1rem 例子:

iphone6的 1rem : 375px * 2 / 10 = 75px

晓得1rem是若干后,如何写其他的css呢?

比方width: 150px, 我们就可以写成2rem

现实上,我们每每经由过程一个px2rem的函数,来做转换。算法就是 设想稿上某个div的宽度值 / 1rem的像素值, 比方 : 150px / 75px = 2rem

细节4: 挪动端屏幕上字体大小的处置惩罚

挪动端上,关于字体大小的需求,平常都是愿望各个屏幕的字体都是坚持一样大的。

平常解决计划,就是依据dpr,设置差别的font-size,让字体大小坚持一致

引荐

再读了许多文章后,以为这篇文章讲的最清楚,所以本文也算是对本身进修学问的一个整顿。
http://www.html-js.com/articl…

关于viewport的解说很细致
https://www.cnblogs.com/2050/…