vw的介绍和运用+周边

1.屏幕适配

1.vw 是相对长度单位，相对视口宽度：100vw等于屏幕宽度

2.vh是相对长度单位，相对视口高度：100vw等于屏幕高度

作用：实现移动端屏幕适配

一套代码实现大一点的屏幕看起来里面的元素越大

小一点的屏幕看起来里面的元素越小

2.vw自适应计算公式

要适配的手机屏幕（100vw） / 设计稿的宽度（375） = 要适配的手机中的div的宽度 / 设计稿的div的宽度

公式：要适配的手机中的div宽度 = （要适配的手机屏幕宽度100vw） * 设计稿的div宽度 / 设计稿的宽度：

如：100vw * 100（设计稿的div宽度） / 375（设计稿宽度）= 26.66666

3.calc：运算符

<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        /* 安装插件后去设置加这行代码： "px2vw.width": 375,后面的数值要随着屏幕的宽度不同而改变 */
        /* vw屏幕自适配 */
        .box1 {
            /* calc:运算符  两侧必须加空格*/
            width: calc(100vw * 100 / 375);
             height: calc(100vw * 40 / 375);
            background-color: yellowgreen;
        }

        .box2 {
            width: calc(100vw * 200 / 375);
            height: calc(100vw * 80 / 375);
            font-size: calc(100vw * 40 / 375);
            background-color: violet;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

</html>

4.vsc 里面的 px2vw插件：

  /* px2插件自动计算，设计稿的宽改了，设置里面的值也要改 */
            /* width: 26.6667vw; */

rem：要引入一段js代码才能生效，生效之后用法跟vw没什么区别

1.rem单位是相对长度单位（找到参照物）

参照的根标签（html）的fontsize

2.如果自己不设置html的字体大小

1rem = 16px （谷歌浏览器的默认字体大小是16px）

3.如果设置了 html 的的字体大小设置为1px

1 rem = 1px ？

但是对于字体来说最小的还是 12px （谷歌）火狐（最小文字为1px）

4（小结）

rem 大小是相当于页面的根标签的字体大小

2. 不要去研究 rem小于 12的时候的情况（自己尽可能将html的字体设置为大于等于12 避免问题即可）

1.rem的运用：要引入一段js代码，使其能随着屏幕大小发生改变

要适配的手机屏幕（10rem） / 设计稿的宽度（375） = 要适配的手机中的div的宽度 / 设计稿的div的宽度

公式：要适配的手机中的div宽度 = （要适配的手机屏幕宽度10rem） * 设计稿的div宽度 / 设计稿的宽度：

如：10rem * 100（设计稿的div宽度） / 375（设计稿宽度）= 26.66666

<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        安装插件后去设置加这行代码："cssrem.rootFontSize": 37.5,后面的数值要随着屏幕的宽度不同而改变
        /* rem屏幕自适配 */
        .box1 {
            /* calc:运算符  两侧必须加空格*/
            width: calc(10rem * 100 / 375);
            height: calc(10rem * 40 / 375);
            background-color: yellowgreen;
        }

        .box2 {
            width: calc(10rem * 200 / 375);
            height: calc(10rem * 80 / 375);
            font-size: calc(10rem * 40 / 375);
            background-color: violet;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <!-- 一定要引入这段js代码才能生效自适应屏幕大小问题 -->
    <script src="./flexble.js"></script>
</body>

</html>

vw，rem，运算符，加插件安装