【css】移动端适配

一、物理像素（设备像素） && css像素（逻辑像素）

像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

在pc端，通常认为css中,1px所表示的真实长度是固定的。

在pc端，字体通常为16px。

• 我们在js或者css代码中使用的px单位就是指的是css像素（逻辑像素）

• 物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多

css像素	为web开发者提供，在css中使用的一个抽象单位物理像素只与设备的硬件密度有关，任何设备的物理像素都是固定的
物理像素	只与设备的硬件密度有关，任何设备的物理像素都是固定的

举例：

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV 元素宽度为 414px，这个 DIV 就会填满手机的宽度；

这里的 414px，896px 指的就是 逻辑像素（css像素）

而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3 个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

即出现在移动端开发时需要用到@3x, @2x 的图片。

设备像素比

设备像素比（DPR）就是物理像素与逻辑像素的比值，即

DPR = 物理像素 / 逻辑像素

二、px、em、rem 的区别及使用场景

三者的区别：

• px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
• em 是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

• 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用 px 即可 。
• 对于需要适配各种移动设备，使用 rem，例如需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。

rem：

rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。

默认情况下，html元素的font-size为16px，所以：

    1 rem = 16px

为了计算方便，通常可以将html的font-size设置成：

    html{ font-size: 62.5% }

此时，font-size = 16*62.5% = 10px；

这种情况下：

    1 rem = 10px

三、vw 与 vh

vw与vh 是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域

vw：视窗宽度的1%（1vw等于window.innerWidth的1%）

vh：视窗高度的1%（1vh等于window.innerHeihgt的1%）

vmin：视窗较小尺寸的1%，即当前vw和vh中较小的值

vmax：视窗大尺寸的1%，即当前vw和vh中较大的值

举例：

如果设计稿的宽度是750px，那么100vw=750px,1vw=7.5px

四、单位混合使用：calc()

calc的语法就是简单的四则运算，

• 使用“+”、“-”、“*” 和 “/” 四则运算；

• 可以使用百分比、px、em、rem等单位；

• 可以混合使用各种单位进行计算；

• 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的；

• 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

height: calc(100vh - (2 * 10)px);

五、如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：

• 适配不同像素密度，针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
• 适配不同屏幕大小，由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。