关于前端自适应布局的理解

最近的一个小项目用到了自适应的布局方案，之前做过的一个移动端项目也用到了自适应的布局方案。当时公司只有我一个前端，以前的项目也没有使用过相关的技术，所以我需要从零开始了解相关的技术并且要能够在项目中应用。

首先我们需要了解屏幕显示的一些原理，忽略各种屏幕的实现原理，一块屏幕上有固定数量的小方块，每个小方块就是一个屏幕物理像素点。屏幕的分辨率就是说的屏幕上像素点的数量。分辨率要和屏幕尺寸结合来看才有意义，相同尺寸的屏幕，像素点越多，分辨率就越高，显示效果就越好，所以我们一般说屏幕分辨率高，实际说的是像素密度（每英寸所拥有的像素数量）高。在在移动端屏幕尺寸不同，像素密度也不同的情况小，要想在不同屏幕上保持相同的显示效果是前端布局的一个重要问题。

要想在不同屏幕上保持相同的显示效果，就要保证css的度量单位与屏幕像素密度保持统一。css的长度单位有很多，px，em，rem，百分比，vw，vh等等。我们要如何使用这些长度单位是个大问题。

px是屏幕的逻辑像素，不同屏幕宽度不同，正在100px宽的屏幕上，100px可以与屏幕同宽，而在200px的屏幕上却只有屏幕的一半宽。我们不可能每次获取屏幕宽度，然后更改px值。

接下来是em，em也是基于父元素的font-size而言的，假如父元素的font-size是20px，那么子元素上1em=20px。页面的根标签font-size可能不同，页面上各个标签的字体大小不同也是很常见的，所以我们不可能每个元素都去计算到底是多少em。

百分比就很好理解了，但是百分比的基准是相对于父元素而言的，例如：100px的设计稿上20px，在实际布局中，这个元素的父元素是40px，那么子元素就是20%，这也涉及到一个计算问题。

vw，vh就方便多了，vw是屏幕宽度，vh是屏幕高度，最大值都是100。但是这也涉及到计算问题，并且还存在浏览器兼容问题。但是在确定浏览器能支持的情况下，用来进行页面的基础布局还是很好用的。

最后要说到rem了，rem是基于页面根元素的font-size而言的，假如html标签的font-size是12px，那么1rem=12px。rem解决了px对应屏幕宽度的问题。我们知道设计稿的宽度，我们需要设定一个rem基准，假如设计稿为1000px，我们设定在1000px宽度下，10px为1rem。那么1rem即为宽度的1/100，这样在任意宽度的屏幕下，我们只要把html的font-size设置为屏幕宽度的1/100即可保证显示效果不变。

最后讲讲2倍屏的问题，我们已经知道屏幕上有很多发光点，即像素点，而css中又有px--像素这个长度单位，一个css像素px是不是对应一个发光的像素点呢？css像素实际上是一个相对长度单位，一个css像素有多长实际上是由设备底层决定的，它可以对应任意多个发光像素点，W3C文档规定，1inch = 96px，但是实际上各屏幕并没有遵循这个规定。在同样尺寸，同样分辨率的2块屏幕，1px可能对应1个像素点，也可能对应2个像素点。这就是屏幕设备像素比，2倍屏即1px对应2个像素点。

移动端一般出设计稿是按照ip6的尺寸来的，宽度750px对应屏幕实际的750个像素点，我们把宽度除以2是对应375个逻辑像素点。

最后前端开发免不了要接触图片，图片的分辨率与屏幕的分辨率是2个概念，位图是由一个个颜色小格子组成的，与屏幕的概念类似。100px*100px的图片表示这个图片横向/纵向上各有100个颜色方格，假如我们在100px*100px的屏幕上全屏显示这个图片，那么正好1个像素点显示一个颜色方格，假如我们在1000px*1000px的屏幕上全屏显示，那么就是10个像素点显示一个颜色方格，但是这10个像素点不会正好都显示这个颜色方格的颜色，其中9个像素点会显示这个颜色方格的近似色，这就造成了位图放大失真的问题。

现有的很多rem方案还涉及到屏幕设备像素比，这个跟布局其实没什么关系，主要是用来加载图片资源用的。我们已经知道1px可能对应多个像素点，并且位图颜色格与屏幕像素点数量不同会导致失真的问题，所以同一张图，在设备像素比为2的屏幕上为了保证和设备像素比为1的屏幕同样的显示效果，图片也需要换成2倍分辨率，设备像素比就是用来在不同屏幕上加载不同分辨率的图片。