随着手机市场的日益丰富，我们前端开发人员面临着“网页内容自适应屏幕尺寸显示”的问题越来越突出。接下来，我们将深入探讨移动端适配的前世今生及解决方案。
为什么需要移动端适配？
通常情况下，设计师按照标准尺寸（如375px）进行设计，在如今移动设备快速更新的时代，各种品牌的手机拥有不同的物理分辨率，导致逻辑分辨率也不尽相同。如果想还原375px的设计稿几乎是不可能的，因为如果一个布局左右固定，右边自适应的话，每台设备的右边展示的内容大小会各不相同。移动端适配显得尤为重要。
了解基本概念
为了理解移动端适配，我们先来明确几个概念：
1. 屏幕尺寸：以屏幕对角线的长度来计量，单位是英寸。
2. 像素：横向和纵向像素的集合构成分辨率，而像素是组成图像的最小单元。
3. 设备物理分辨率（设备像素）：我们见证了手机这个移动设备的发展历程，从蓝屏到彩屏，再到触屏和智能手机。随着技术的发展，我们的手机屏幕越来越清晰，越来越大，因此屏幕发展也越来越迅速。
4. 逻辑分辨率（设备独立像素）：虽然设备物理分辨率不同，但逻辑分辨率却差不多，这要归功于乔布斯的Retina Display概念。
5. 设备像素比（ DPR）：物理像素和设备独立像素的比值。这个比值会产生一像素边框问题。
一像素边框问题及其解决方案：
当我们CSS里写1px的时候，因为它是逻辑像素，导致我们的逻辑像素根据设备像素比（DPR）映设备上可能为2px或3px。由于每台设备的屏幕尺寸不同，导致每个物理像素渲染出来的大小也不同。这在尺寸较大的设备上，1px边框看起来会相当粗矿。核心思路是在web中，通过媒体查询区分DPR，根据这个像素比算出它应该有的大小。其中涉及到一个非常有用的属性：transform: scale()。例如，当DPR为2时，可以使用transform: scaleY(0.5)来缩小元素的高度。这样完美解决了一像素边框在不同设备上的显示效果问题。
如何进行适配？
1. viewport：视口代表当前可见的计算机图形区域。在移动端，配置视口只需一个meta标签：。其中width=device-width使视口宽度等于设备宽度，initial-scale=1使初始缩放比例为1。
2. 适配方法：
rem适配：根据设备像素比进行动态计算，实现不同设备的等比例缩放。早期的flexible方案就是基于此原理。不过随着技术的发展，这个方案逐渐被淘汰。
