vw

视口单位(Viewport units)

什么是视口？

在PC端，视口指的是在PC端，指的是浏览器的可视区域；

而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位

vw：100vw等于屏幕宽度的100%（相对长度单位）
vh：100vh等于视口高度的100%（相对长度单位）

计算方式

要适配元素的宽度 = 屏幕的宽度 * 设计稿中元素的宽度 / 设计稿的宽度

**注：**css不支持运算，所以需要加上 **calc()**函数

 /* 屏幕的宽度 * 设置稿元素的宽度 / 设计稿的宽度 */
            width: calc(100vw * 40 / 375);

插件

如果每行代码都要写公式那不得累个半死？一百块钱一天 玩命呀！！

咱们可以使用插件实现自动换算

px2vw插件（插件很多选择自己喜欢的即可）

设置

咱们需要简单设置一下设计稿的宽度

效果

rem

rem是什么？

它的全称是 font size of the root element （根元素的字体大小）

rem是一种相对长度单位，相对于根元素(即html元素)font-size计算值的倍数

浏览器的默认字体？

浏览器的默认的font-size是16px，1rem默认就等于16px

rem可以做什么及它的应用场景？

用来做web app的屏幕适配，因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案

屏幕宽度与根标签字体大小的关系

10倍根标签的字体大小 = 屏幕的宽度

根标签的大小 = 1rem

10rem = 10倍根标签的字体大小 = 屏幕的宽度

10rem = 屏幕的宽度

代码验证

  <style>
        div {
            width: 10rem;
            background-color: skyblue;
        }

        p {
            width: 5rem;
            background-color: orange;
        }
    </style>

效果如下：

解决自动适配

目前我们改变屏幕的宽度HTML标签的字体大小不会发生改变，既rem单位也不会发生任何变化

如何解决

手机淘宝团队给出的方案就是通过js来解决

咱们也可以直接引入这一份js文件即可：链接🔗

<script src="./flexible.js"></script>

插件

我们也是可以通过插件直接换算rem单位

px to rem & rpx (cssrem)

插件有很多选择自己喜欢的即可

设置

设置根标签的字体大小

为什么我的数值是37.5

10rem = 屏幕的宽度

1rem = 屏幕的宽度 / 10

1rem = 设计稿的宽度 / 10

则我的设计稿宽度为375，所以根标签字体大小设置为37.5

vw rem简单的理解

vw