【手淘自适应】rem+webpack实现移动端自适应布局的思路

开始之前先粗略讲一下各种概念，如果要深入理解可以谷歌关键词到处逛逛。如果对这些概念了如指掌，那就可以直接拉到第二块二、实现自适应布局区域。

---

一、各类名词概念

1、各类像素

（1）物理像素(dp —— device pixels)

概念

说人话就是屏幕上每一颗最小发光点就是1个物理像素。ppi（每英寸像素量）是屏幕像素密度的单位，像素密度越大，屏幕显示细节就能更多，画质更加细腻，文本更加清晰。。。但还是看不清楚打马赛克的图片。我们一直谈到的分辨率就是 横向像素点的数量X竖向像素点的数量 px，比如，1920 X 1080 px。

单位

• 单位 —— dp（在不用区分的情况下会表示为 px ）

（2）独立设备像素（dips —— Device Independent Pixels ）

需求

我们由上文知道，屏幕在相同量的物理像素下，不同的ppi，物理宽度不同，如果按照dp来布局，在dp相同都情况下，比如说要展示的模块宽度都为500dp,一只手机的宽度为1000dp，另一只手机的宽度为500dp，并且两只手机的物理宽度相同（举个栗子，都为5cm），那这个模块在后一个手机上能显示5cm，在前一个手机上却只能显示2.5cm。有时候我们不管是做原生app还是移动端web网页，想要一个模块在不同设备上实际显示物理大小差不多，这时候就要使用到独立设备像素了。

概念

字面意思，独立于设备物理像素的像素点概念，在不同设备上，相同数量的一排独立设备像素的物理宽度近乎相同，为什么说是近乎相同呢，因为难免各种屏幕的制作工艺之间的误差，如果想要再深入，具体可以看 这篇 对独立设备像素的描述。我们在web和app上都会用到这个像素单位，来保持视觉宽度效果的一致性。

不足

（再盗一张图。。。）如下图所示，在一些ppi高的手机中（比如二倍屏），原本一块区域可以由4x4个像素点构成，现在使用了独立设备像素作为单位后就只有2x2个像素点构成，对于一些颜色变化不多的布局样式还行，但对于图片，会大大损失它但细腻度，清晰度，也就是这时候用屏幕好的手机和屏幕差的手机看网页上的图片画面一样差，那岂不是亏了钱去买屏幕好的手机了。。。

单位

• 单位 —— px（各种客户端/web）

（3）css像素（属于独立设备像素）

概念

在默认情况下，css像素可以看作独立设备像素，它与物理像素的比值相同于独立设备像素与物理像素的比值，但是暂时只在浏览器上应用css像素这个概念。在web端，我们可以使用meta标签中initial-scale来进行缩放以改变它与物理像素的比值。

单位

• 单位 —— px(web)

2、viewport(视口)

视口分为3种，我们先来看前面两种，ppk将他们分别称为

(1)布局视口(layout viewpo