v w
rem
屏幕适配公式
vw与rem的选择
vscode安装插件

相对长度单位

1.VW

①定义：相对长度单位 100 v w = 屏幕的宽度

②v w做屏幕适配（公式）

Ⅰ.分析：

要适配的手机中的div的宽度=(要适配的手机的屏幕100 v w)*设计稿中div的宽度/设计稿的宽度

Ⅱ.语法

要适配的手机的屏幕(750)/设计稿的宽度(375)= 要适配的屏幕中的div的宽度(200)/ 设计稿中div宽度(100)

<style>
        .box1{
            width: calc(100vw * 100 / 375);
            height: calc(100vw * 50 / 375);
            background-color: #faa;
        }
        .box2{
            width: calc(100vw * 200 /375);
            height: calc(100vw *80 /375);
            background-color: #baf;
        }
    </style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

③.px2vw插件安装教程

"px2vw.width": 375,

2.rem

①定义：相对长度单位相对于根标签（html）的字体的大小

②rem做屏幕适配（公式）

必须引入js 手淘开发 flexible.js ：

Ⅰ.分析：

Ⅱ语法：

要适配的手机的屏幕(750)/设计稿的宽度(375)= 要适配的屏幕中的div的宽度(200)/ 设计稿中div宽度(100)

<style>
        .d1 {
            /* 改成rem单位 */
            width: calc(10rem * 100 / 375);
            height: calc(10rem * 50 / 375);
            background-color: #faa;
        }

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

<body>
    <div class="d1">d1</div>
    <div class="d2">d2</div>
</body>

<!-- 必须要引入js -->
<script src="./flexible.js"></script>

③px to rem&rpx(cssrem)安装教程

"cssrem.rootFontSize": 37.5,

拓展：工作中vw与rem的选择

1.假设让我们来选择技术的话首选vw

2.外面企业两种单位都有在使用

3.我们都懂得它们做屏幕适配

移动web第六天