阅读笔记：H5 适配移动端 | 青训营

CSS 中的尺寸单位

CSS 中的尺寸单位都是 相对长度单位，只是相对的目标不同。

px(pixel) 像素单位

em 相对单位

在不同的 CSS 属性当中使用 em 其相对的目标也是不同，如下：

用于 font-size 中则是相对于 父元素 font-size 大小

<style>
    div {
        font-size: 16px;
    }
    .box {
        font-size: 2em;
    }
</style>
<body>
    <!-- hello 字体大小应该为 32px -->
    <div class="box">hello</div>
</body>

用于 其他属性（如 width，height） 中使用是相对于 自身 font-size 大小

<style>
    .box {
        font-size: 32px;
        width: 2em;  /* 64px */
        height: 2em;  /* 64px */
    }
</style>
<body>
    <!--  --应该为64*64大小的的一个盒子 -->
    <div class="box">hello</div>
</body>

rem(root em)相对单位

rem 相对于 <html> 根元素的，因此在 body 标签里面设置 font-size 是不起作用的

因此 rem 就可做到 目标元素 与 根元素 间保持 成比例 的大小关系，又可以避免字体大小逐层复合的连锁反应等

<style>
html {
  font-size: 20px;
}
.box {
  width: 10rem;
  height: 10rem;
  background: red;
  margin: 100px auto;
  /* 链式结构 */
  list-style: none;
}
</style>
<body>
<!-- 200*200大小 -->
  <div class="box">hello</div>
</body>

vw 和 vh

vw 全称是 viewport width，代表的是 视口的宽度，相对于 视口 viewport 的宽度
vh 全称是 viewport height，代表的是 视口的高度，相对于 视口 viewport 的高度
vw 和 vh 是将 视口宽/高 都分成 100 份，因此 100vw = 视口宽、100vh = 视口高

vmin 和 vmax 代表的是 视口宽度 和 视口高度 中的 最小值 和 最大值
vmin = 视口高度 vh 和宽度 vw 间的最小值
vmax = 视口高度 vh 和宽度 vw 间的最大值

适配方案

rem 适配

核心原理

将 设备视口 划分成 n 份， n 可以是 任何正确的值

设置 设备视口 根元素 <html> 的 font-size = 设备视口宽 ÷ 份数(n)，即得到 设备视口 1 rem = 多少设备视口 px

举例

假设我有一部手机，视口宽 * 视口高 = 375 * 667
将设备视口分成 10 份，设置 根元素 html 的 font-size = 375 ÷ 10 = 37.5 px，即 1 rem = 37.5 px
js 代码如下

(function (n = 10){
    const dEl = document.documentElement;
    
    function setRem(){
        const rem = dEl.clientWidth / n;
        dEl.style.fontSize = rem  + 'px';
    }

    // 初始化执行
    setRem()

    // 视口大小变动时执行
    window.onresize = setRem
})()

vw/vh 适配

vw 和 vh 是将 视口宽/高 都分成 100 份，相对于 设备视口 375px 来说 1vw = 375 ÷ 100 = 3.75px。

注意：vm/vh 适配只能把视口宽/高分成 100 份

什么是viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

总结

通过这篇文章我熟悉了css的 px、em、rem、vw/vh 单位，同时简单了解了 H5 在移动端的适配原理：rem 适配和 vw/vh 适配

阅读笔记：H5 适配移动端 & 什么viewport | 青训营