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

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

目录:

• 1、让坑爹的单位,再也不坑爹
• 2、须要准备什么样的设计稿

• 3、rem方案的原理和细节

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

1、让坑爹的单位,再也不坑爹

移动端适配自己不难,可是由于涉及到单位转换,想要解释清楚移动端适配方案,你必需要搞清楚各个单位的慨念。

可是因为中英翻译的问题,我发现不少文章在讲解移动端适配时,关于单位,咱们有一万种翻译方法...

"物理像素、逻辑像素、物理分辨率、逻辑分辨率、实际像素、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像素 、 实际像素...

2、须要准备什么样的设计稿

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

3、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/...