📱 移动端适配

2023-09-02 | 2023-09-06 | 6.6k | 26 分钟

移动端基础知识

移动端 Web 页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 Web 页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题；

因此在移动端页面开发中，适配是一个非常重要的问题；

在具体介绍适配方案之前，先来学习一点关于移动端的基础知识，主要包含以下内容：

设备像素（物理像素）

屏幕尺寸和像素密度（PPI）

CSS 像素（设备独立像素、逻辑像素）

像素比（DPR）

设备像素（物理像素）

首先要介绍的是 设备像素 ，也被称之为 物理像素 ，这是最好理解的一个名词，对于一般的显示设备来说，一个像素对应着屏幕上的一个发光点，这个点能够发出红、绿、蓝三种颜色的光，通过混合不同的 RGB 值，创造了一个像素的颜色；因此设备像素就是指实际存在的像素；
平时在看一个设备屏幕的参数时，往往就有分辨率这么一个参数，例如 2340 × 1080，这代表什么含义呢？
这表示在设备屏幕的水平方向上有 2340 个像素点，垂直方向上有 1080 个像素点，有一个非常有趣的现象，那就是 PC 端的屏幕显示器分辨率是横纵比，而手机屏幕确是纵横比；

屏幕尺寸和像素密度 PPI

屏幕尺寸 6.67 英寸是指屏幕对角线的长度；1 英寸（inch）等于 2.54 厘米（cm）
有了屏幕分辨率和屏幕尺寸的信息，我们就可以计算像素密度（PPI）。所谓像素密度，就是指 1 英寸下的设备像素数量，计算公式如下：

这里可以简单的计算一下 iPhone6 Plus 的 ppi，可以看到正如官方所描述的每英寸有 401 个设备像素，也就是 ppi 值为 401：

// 屏幕斜边的像素（勾股定理求斜边距离）
const margin = Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2));
console.log(margin); // 2202.9071700822983
console.log(margin/5.5); // 400.52857637859967 PPI

在 https://www.sven.de/dpi/ 这里可以查看到一些常见设备的 ppi 值；

CSS 像素（设备独立像素、逻辑像素）

上面已经介绍了 ppi 的概念，那么 ppi 越高，所包含的设备像素也就越多；
但是这就会滋生出另外一个问题，如果我的 CSS 像素和设备像素是 1:1 的关系的话，随着设备像素的提升，图像就会越来越小；
那么怎么解决这个问题呢？其实也非常好办，之前 CSS 像素和设备像素是 1:1 的关系，现在只需要将这个比例稍作修改即可；以前 CSS 像素和设备像素 1:1 关系，1 个 CSS 像素对应 1 个设备像素，那么现在我修改这个比例，1 个 CSS 像素对应 2 个设备像素即可；
以前在做 PC 端网页开发的时候，由于 CSS 像素始终和设备像素是 1:1 的关系（不考虑缩放），所以给大家了一种错觉，以为 CSS 像素和设备像素就是 1:1 的对应关系，但是实际上 CSS 像素确是一个抽象的单位，具体含有多少个设备像素不是一定的；

像素比 DPR

像素比（DPR），英文全称为 device pixel ratio（设备像素比），计算公式为：DPR = 设备像素 / CSS 像素；

说简单点，就是一个 CSS 像素要用多少个设备像素来显示；

举个例子：
- 如果 CSS 像素和设备像素 1:1 关系，那么 DPR 值就为 1，表示用一个设备像素就够了；
- 如果 1 个 CSS 像素对应 2 个设备像素，那么 DPR 值就为 2，则表示一个 CSS 像素要用 2 个设备像素来表示；
这里以 iPhone6 为例：
- iPhone6 官方给出的分辨率为 1334 x 750，设置一个 div，宽度为 375 却能撑满整个手机；
  html
  css
```
<div></div>
```
```
*{
    margin:0;
    padding:0;
}
div{
    width: 375px;
    height: 100px;
    background-color: red;
}
```
- 由此可以推测，一个 CSS 像素和设备像素的对应关系为 1:2，那么 DPR 就应该是 2，通过查看 window.devicePixelRatio 的值发现也确实为 2；
```
console.log(window.devicePixelRatio);
```
iPhone 常见设备的 DPR 值：

viewport 视口

视口的概念

视口，英语全称 viewport，指的是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上（也可能是一个 app 中的 webview）用来显示网页的那部分区域；
在早期 PC 年代，电脑上的网页常见的宽度有：960px、980px、1190px、1210px，其中以 980px 居多；到了移动端时代，由于一开始并不存在专门的移动端网页，所以在最开始的时候也就自然而然沿用了这一设定，以苹果的 Safari 为首的浏览器默认采用的视口宽度就是 980px 的宽度，后面的很多安卓机型也都就沿袭了这一设定；
下图列出了一些设备上浏览器的默认 viewport 的宽度：
此时使用手机浏览器打开电脑版的网页的效果如下：用手机访问电脑版网页的时候，刚好没有留白，像从 3000 米高空，俯瞰整个页面，用户想看哪个区域，可以用两个指头捏合，放大页面；
可以看到在手机端的浏览器中，对网页进行了缩放，以便显示整张网页。之后用户可以将两个指头捏合，放大页面。
可以进行一个简单的验证，如下：
- 将默认的视口设置取消了，此时就会采用默认的 980px，而 div.contianer 设置为 375px
```
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            width: 375px;
            display: flex;
        }
        .container>div{
            width: 50%;
            height: 50px;
        }
        .container>div:nth-child(1) {
            background-color: red;
        }
        .container>div:nth-child(2) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
    </div>
</body>
```
- 效果如下：可以看到，由于默认的视口宽度为 980px，因此 div.container 并没有占满，只占了一半都还不到。
- 后来随着移动端的发展，渐渐的专门针对移动端的网页就出来，如下图所示：
- 此时就不能像之前一样视口一直按照 PC 端的 980px 来作为标准，因为 980px 实际上是超出了设备屏幕的，只不过浏览器智能的进行了缩放。至于缩放的比例是多少，后面再说；
- 此时就应该按照设备的 CSS 像素来作为标准，也就是说现在的网页就应该按照 375px 的标准；

视口的分类

ppk 大神对于移动设备上的 viewport 有着非常多的研究（第一篇，第二篇，第三篇），ppk 认为，移动设备上有三个 viewport 分别是：
- layout viewport：网页实际的宽度
- visual viewport：设备的宽度
- ideal viewport：是最适合移动设备的 viewport
ppk 把浏览器默认的 viewport，也就是前面所讲的 980px 宽的 viewport 叫做 layout viewport，这个 layout viewport 的宽度可以通过 window.innerWidth 来获取；
然而 layout viewport 的宽度是大于浏览器可视区域的宽度的，所以还需要一个 viewport 来代表浏览器可视区域的大小，ppk 把这个 viewport 叫做 visual viewport；visual viewport 的宽度可以通过 document.documentElement.clientWidth 来获取；
在早期 iPhone3GS 时代，由于一个 CSS 像素对应一个设备像素，因此 visual viewport 和设备 CSS 宽度是等价的；但是从 iPhone4 时代开始，一个 CSS 像素对应 2 个设备像素，设备的 CSS 宽度仍然是 320px，但是物理像素翻了倍。
于是 ppk 又发明了一个新词，叫做 ideal viewport，也就是第三个 viewport ——移动设备的完美适配 viewport，其实对应的就是设备的 CSS 宽度；例如 iPhone 3GS 和 iPhone4 的 ideal viewport 宽度都是 320px，无论它的设备像素是 320 还是 640，这两款 iPhone 中，CSS 中的 320px 就代表 iPhone 屏幕的宽度。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户；

视口相关属性

移动设备默认的 viewport 是 layout viewport，也就是那个比屏幕要宽的 viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport。那么怎么才能得到 ideal viewport 呢？
- 这就该轮到 meta 标签出场了。
- 在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的 head 标签中：
```
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
```
- 该 meta 标签的作用是让当前 viewport 为 ideal viewport，同时不允许用户手动缩放；
- 允不允许用户缩放不同的网站有不同的要求，但让 viewport 的宽度为 ideal viewport，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认 viewport，在不缩放的情况下会出现横向滚动条；
name 为 viewport 的标 meta 标签最早是由苹果公司在其 safari 浏览器中引入的，目的就是解决移动设备的 viewport 问题；后来安卓以及各大浏览器厂商也都纷纷效仿，引入对 meta viewport 的支持，事实也证明这个东西还是非常有用的；

在苹果的规范中，meta viewport 有 6 个属性（暂且把 content 中的那些东西称为一个个属性和值），如下：

属性名	作用
width	设置 layout viewport 的宽度，为一个正整数，或字符串"device-width"
height	设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

width=400 表示把当前 viewport 的宽度设为 400px，initial-scale=1 则表示把当前 viewport 的宽度设为 ideal viewport 的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？
- 当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当 width=400，ideal viewport 的宽度为 320 时，取的是 400；
- 当 width=400，ideal viewport 的宽度为 480 时，取的是 ideal viewport 的宽度；
最佳实践
- 要把当前的 viewport 宽度设为 ideal viewport 的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是 iphone、ipad 以及 IE 会横竖屏不分，通通以竖屏的 ideal viewport 宽度为准；
- 最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad 的毛病，width=device-width 则解决了 IE 的毛病：
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

关于缩放

即使使用手机浏览器打开 PC 端的网页，手机浏览器也能很智能的对页面进行缩放，从而不出现滚动条。
那么这个缩放比例究竟是多少呢？这里其实有一个公式，那就是：当前缩放值 = ideal viewport宽度 / layout viewport 宽度
- 比如说，我们不设置任何的 viewport meta 标签，此时 layout viewport 的宽度为 980px，但我们可以看到浏览器并没有出现横向滚动条，因为浏览器默认的把页面缩小了。
- 根据上面的公式，缩放比就为 375 / 980 = 0.38 左右。
- 也就是当前的 initial-scale 默认值应该是 0.38 这样子。但是如果指定了 initial-scale 的值，那么这个默认值就不起作用了。

最佳实践：为了保证在不同设备中，显示网页的视口正常，最常见的设置如下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

移动端适配

所谓适配，其实概念很简单，就是在任意手机中我们的网页显示都是正常的。

让网页在各个设备中都能显示正常，包括：

字体

宽高

间距

图像（图标、图片）

百分比适配

在 CSS 中盒子的宽度可以设置为一个百分比值，表示根据父级宽度的百分比来计算宽度；因此可以通过百分比的方式让一个盒子在任何设备中宽度占比都是一样的；

html

css

<div></div>
<div></div>
<div></div>
<div></div>

* {
    margin: 0;
    padding: 0;
}

div {
    width: 25%;
    height: 100px;
    float: left;
}

div:nth-child(1) {
    background: red;
}

div:nth-child(2) {
    background: green;
}

div:nth-child(3) {
    background: blue;
}

div:nth-child(4) {
    background: pink;
}

在上面的代码中，设置了 4 个盒子，每个盒子的宽度占比为 25% ；由于设置的是百分比，因此这在任何设备中显示的比例都是一样的；
例如在 360 的移动端网页中，就采用了这种适配方案；
但是这种方案往往需要配合其他适配方案一起使用；

viewport 缩放适配

这种适配方案的原理就是把所有机型的 CSS 像素（设备宽度）设置成一致的；不同的设备 CSS 像素是不一样的，例如 iPhone 6/7/8 为 375px，而 iPhone 6/7/8 Plus 为 414px；那么可以通过设置 viewport 的缩放，来使页面显示正常；

不同的设备其设备宽度是不一样的，因此不能够将设备宽度写死，而是要获取当前设备的宽度，然后再来计算缩放比，代码如下：

(function(){
  // 获取 css 像素（viewport 没有缩放）
  var curWidth = document.documentElement.clientWidth;
  console.log(curWidth);

  var targetWidth = 375;
  var scale = curWidth/targetWidth;
  console.log(scale);

  var view = document.getElementById('view');
  console.log(view.content);

  view.content='initial-scale='+scale+',user-scalable=no,minimum-scale='+scale+',maximum-scale='+scale+'';
})();

看样子是解决了问题，但是这种适配方案也有其本身的缺点：
- 就像在 viewport 设置宽度的时候，可以把宽度设置成一个固定值一样，会出现所有的手机看上去都是同样的大小，没有分别了，不太好，厂商特意做出各种大小的手机，还要弄成一样，那人家买大屏机有什么意义；
- 算出的的值在一些有小数的情况下可能会出现误差（无关紧要），因为设备独立像素不能有小数；
- 对设计稿的测量存在问题；

DPR 缩放适配

以 iPhone6/7/8 来举例，iPhone6/7/8 物理像素为 750px，CSS 像素（设备宽度）为 375px，DPR 比例为 2.0；此时假设 UI 要给一张图占满整个屏幕的图，她需要按照 750px 起稿；
如上图：对于 dpr=2 的 retina 屏幕而言，1 个位图像素对应于 4 个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊（注意上述的几个颜色值），所以对于图片高清问题，比较好的方案就是两倍图片（ @2x ），如：200×300(css pixel)img 标签，就需要提供 400×600 的图片，如此一来，位图像素点个数就是原来的 4 倍，在 retina 屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1 的比例，图片自然就清晰了；
这里还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？
- 很明显，在普通屏幕下，200×300(css pixel)img 标签，所对应的物理像素个数就是 200×300 个，而两倍图片的位图像素个数则是 200×300×4，所以就出现一个物理像素点对应 4 个位图像素点，所以它的取色也只能通过一定的算法（显示结果就是一张只有原图像素总数四分之一，称这个过程叫做 downsampling），肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差（但还是可以接受的）；
- 用一张图片来表示：
明白了这个点之后，接下来看基于 DPR 的缩放适配方式，其原理就是将把 CSS 像素缩放成与设备像素一样大的尺寸；因为在实际开发中，设计者为了页面的高清，都是采用物理像素的值来进行设计；例如比如 iPhone6/7/8 的设备宽度为 375px，将其缩放为 750px；
- 对应的代码如下：
```
(function () {
    var meta = document.querySelector('meta[name="viewport"]');
    // window.devicePixelRatio 获取 DPR 的值
    // 以 iPhone 6/7/8 为例，DPR = 2
    // 750px * 缩放值 = 375px => 缩放值 = 375px/750px => 缩放值 = 1/DPR
    var scale = 1 / window.devicePixelRatio;

    if (!meta) {
        // 这个条件成立说明用户没有写 meta 标签，需要创建一个
        meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width,initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + '';
        document.head.appendChild(meta);
    } else {
        meta.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + '');
    }
})();
```
- 来看效果：
- 按照 DPR 缩放为 750px 后，反而占不满了，因为给的宽度为 375px，因此只占了一半。那么这种缩放方式有啥意义呢？
- 实际上这种方式最大的意义就是开发者和设计者的像素都是统一的，因为设计者是按照 750px 来设计的（iPhone 6/7/8 为例），那么前端在量图的时候，也是以 750px 为基准，通过 DPR 缩放，量出来是多少，在写代码时就可以设置多少；
- 但是这种方案好像并没有解决适配的问题，假设设计稿给的是 750px 像素，测量出来也的确是 750px ，但是如果此时我将宽度设置为 750px ，只能保证在 iPhone 6/7/8 中没有问题，如果换成 iPhone 6/7/8 Plus，仍然存在适配问题，那么怎么解决呢？
- 此时就需要使用 rem 适配了；

rem 适配

rem 是移动端适配中比较主流的方案；

rem 英语全称 font size of the root element，是 CSS3 新增的一个相对单位，是指相对于根元素的字体大小的单位，它就是一个相对单位；

回顾一下 rem 是什么：
- 来看一个简单的例子：
  html
  css
```
<p>Lorem ipsum dolor sit amet.</p>
<div></div>
```
```
:root{
    font-size: 20px;
}
p{
    font-size: 2rem;
}
div{
    width: 2rem;
    height: 2rem;
    background-color: red;
}
```
- 在上面的示例中，设置根元素的字体为 20px，之后所有的元素设置 rem 单位表示根据根元素字体大小来缩放。例如 p 元素的字体大小是 2rem，也就是 2 x 20px = 40px；
- 而下面的 div 并没有设置字体大小，在设置宽度时也使用的是 rem，2rem 仍然等于 2 x 20px = 40px。
rem 适配的原理，就是把所有的设备都分成相同的若干份，再计算元素宽度 所占的份数；
- 举个例子，iPhone5 和 iPhone6 对应的设备宽度分别为 320px 和 375px，现将其分为 100 列，那么对应每一列为 3.2px 和 3.75px，不同的设备宽度，对应的每一列的宽度就不一样。之后再设置元素的宽度时，以列为媒介即可；
- 比如同样一个 div，设置它的宽度为 10 列，那么在 iPhone5 中该 div 的宽就是 32px，而在 iPhone6 中该 div 的宽度就是 37.5px；通过这种方式是不是就实现了不同设备宽度的设备中，一个元素的大小可以等比例的缩放；
- 而这个一列的宽度，实际上就是 rem，也就是说 rem 的适配方式，就是根据屏幕的宽度配合列数算出一列的宽度，之后设置 HTML 文档根元素的 font-size 就为此宽度即可；

下面是基于此适配原理的一种实现方案：（计算过于麻烦）

示例代码

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 8rem;
    height: 8rem;
    background-color: red;
  }
</style>
<body>
    <!-- 
      以 iPhone6 为例，假设测量出来为 375px，换算为设备宽度为 187.5px
      然后计算出占用多少列 187.5/23.4375 = 8
    -->
    <!-- 占据屏幕的一半 -->
    <div></div>
</body>
<script>
  // 方案一：缺点在于我们还需要手动去计算究竟是多少rem，存在一个单位的转换，比较繁琐
  (function () {
    var html = document.documentElement; // HTML 根元素
    var width = html.clientWidth; // CSS 像素(设备宽度)
    html.style.fontSize = width / 16 + 'px'; // 把屏幕分成了 16 列，每一列的宽度为 23.4375
  })();
</script>

效果如下：

但是上面的实现方案比较麻烦的是在测量设计稿后要将设计稿上的宽度转为列数，目前一种 比较流行的方式如下：(这种方案，最方便的是设计稿量出来的尺寸和列数之间的转换关系，只需要将量出来的尺寸小数点往前移动两位即可)

// 方案二：优化方案，可以非常轻松的实现转换
(function (doc, win, designWidth) {
  var html = doc.documentElement;

  function refreshRem() {
    var clientWidth = html.clientWidth;
    if (clientWidth >= designWidth) {
      // 如果设备宽度都大于设计稿了，那么测量出来是多少就是多少
      html.style.fontSize = '100px';
    } else {
      // 计算出比例
      // 拿 iPhone6 为例，375/750=0.5，相当于每一列的宽度为 0.5px，分成了 750 列，
      // 但是浏览器是不允许这么小的字体大小的，因此乘上一个 100，变成每一列的宽度为 50px，375/50 = 7.5列
      // 之后在将设计稿尺寸转换为列数时，也不需要繁杂的计算，
      // 假设设计稿量出来为 375px(设备像素) => 187.5(CSS像素) => 187.5/50(每一列宽度) = 3.75(所占列数，正好是 375向前移动 2 个小数点)
      html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
    }
  };

  doc.addEventListener('DOMContentLoaded', refreshRem);
})(document, window, 750); // 750 为设计稿的宽度

vw、vh 适配

CSS3 除了带来 rem 单位，还带来了和 Viewport 相关的 4 个单位，分别为 vw、vh、vmin 和 vmax：
- vw 是 Viewport’s width 的简写，1vw 等于 window.innerWidth 的 1% ；
- vh 和 vw 类似，是 Viewport’s height 的简写，1vh 等于 window.innerHeihgt 的 1% ；
- vmin 的值是当前 vw 和 vh 中较小的值；
- vmax 的值是当前 vw 和 vh 中较大的值；
vm、vh 使用原理：（vm、vh 实现了分成 100列，不再需要 rem 中的 js 计算了）
- 有没有发现，vw 相当于直接将屏幕分为了 100 列，1vw 就是 1 列；那么按照 iPhone 6/7/8 设备宽度为 375px，1vw 就是 3.75px，根据上面的公式：
```
html.style.fontSize = 100 * (clientWidth / designWidth) + 'px'; // 100 * (350/750) = 50，设置根字体为 50px（需要转成 vm）
```
- 将根元素的字体大小设置为 50px，此时和设计稿测量出来的尺寸转换会非常的和谐，只需要小数点往前移动 2 位即可；
- 因此需要计算 50px 对应多少 vw？由于 1vw 对应的宽度为 3.75px，所以可以很轻松的计算出 50/3.75 = 13.33333333vw；
使用方式：
- 示例代码
```
<style>
  * {
      margin: 0;
      padding: 0;
  }
  :root{
      /* 之后根据设计稿的大小，动态设置，一行代码实现了适配 */
      font-size: 13.33333333vw;
  }
  div {
      width: 3.75rem;
      height: 3.75rem;
      background-color: red;
  }
</style>
<body>
    <div></div>
</body>
```
- 效果如下：可以看到，使用 vw 的一个最大优点就是不需要再使用前面那一大段 JS 来做处理了，因为分列的工作 vw 已经帮我们做了；唯一需要做的就是计算根元素字体应该设置多少 vw，之后从测量稿量出来的尺寸仍然是小数点前移 2 位即可；

使用第三方库进行适配

hotcss

hotcss 移动端布局开发解决方案，github 地址；
首先从 hotcss 的 github 地址下载对应的文件，需要的主要有 hotcss.js、px2rem.scss 这 2 个文件；

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./hotcss.js"></script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

在上面的 HTML 文件中，引入了 hotcss.js 以及 index.css，其中 index.css 是由 scss 自动生成的（VSCode 插件）；

// 引入 px2rem.scss，该文件导出了一个 px2rem 的函数，负责将 px 转换为 rem
@import 'px2rem.scss';
// 为设计稿的宽度
$designWidth:750; 

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
}

div{
    width:px2rem(187.5);
    height:px2rem(187.5);
    border: 1px solid;
}

div:nth-child(1){
    background-color: red;
}

然后就可以愉快的书写代码了，从设计稿测量出来的是多少像素，就直接书写多少像素，不过用 px2rem 方法包一下即可，Scss 进行转译的时候会自动转换为 rem 单位；

flexible

阿里早期也开源的一个移动端适配解决方案 flexible，github 地址；
不过随着 vw、vh 这种基于视口的单位得到越来越多浏览器的支持，所以官方也已经不再维护这个库；

打赏作者

您的打赏是我前进的动力

微信

支付宝

TypeScript👉 类型保护的 5 种方式

📱 响应式

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 移动端基础知识
2. viewport 视口
3. 移动端适配