CSS:vm-rem移动端布局的基本常识

<!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>vm-rem移动端布局的基本常识</title>
</head>
<body>
    <!-- DPR：设备像素比 -->
    <!-- 布局视图：默认宽度一般是980px -->
    <!-- 视觉视图：眼睛看的到的视图，移动设置的布局视图：375px--iPhone 6/7/8 -->
    <!-- name="viewport" content="width=device-width, initial-scale=1.0" -->
    <!-- viewport,视觉窗口，
    width=device-width，页面的布局宽度
    device-width：视觉视图的宽度，设备宽度，二者相等 -->
    <!-- device-width：375px
    width = 980px
    width赋值后就等于375px了
    当前的布局视图，就是当前移动设备浏览器的可视区宽度 -->
    <!-- 1. 第一步实现：布局视图 = 视觉视图 -->
    <!--2. 第二个小目标：理想视图 = 视觉视图
    initial-scale=1.0 这种1：1还原视觉视图的布局，叫理想视图 -->
    <!-- ！目前 主流的 移动端布局方案：rem + vm -->
<!--    
        /* iPhone 11  375px
        vm:把屏幕分为100份
        100 vm = 100% = 375px */
        /* 之前浏览器默认字号 16px
        这个也是默认的rem的大小
        1 rem = 16 px */
        /* 为了计算方便，推荐将rem设置为100px
        例如一个元素 */
        /* 1 rem = 100 px;
        width = 50px = 0.5rem */
        /* 通常会给750px的宽度的设计稿，DPR = 2
        device-width = 750 px /DPR = 375px
        以后就直接以375px为宽度布局，理想视图来布局 */ -->
   <style>
        html{
            /* font-size: 100px; */
            font-size: calc(100vw / 3.75);    
            /* 1. 第一步：1rem =100 px */
          }
        body{
            /* 把字号还原回去浏览器默认的字号 16px */
            /* font-size: 16px; */
            font-size: .16rem;
            /* 2.第二步 1em = 16px */
        }
    </style>
<div class="box">hello world</div>
<style>
    /* 200px *50px */
    .box {
        width: 2rem;
        height: .5rem;
        border: 1px solid #000;
        background-color: lightgreen;
        box-sizing: border-box;
    }
    /* vw是当前屏幕宽度的百分比 */
    /* 1vw =1% */
    /* 当屏幕宽度小于320px的时候，字号不能再小了，否则就看不清了 */
    @media screen and (max-width:320px) {
        html{
            /* font-size: .85rem; */
            font-size: 85px;
        }
    }
    /* 当屏幕宽度大于640px,字体不能再大了 */
    @media screen and (min-width:640px) {
        html{
            /* font-size: .85rem; */
            font-size: 170px;
        }
    }
</style>
</body>
</html>
相关文章
