单位em,rem详解与移动端屏幕vw，vh基础 -

em

em

1.5em 是用户代理（浏览器）默认的字号，在element下的computed可以查询得到，24px=1.5em。
font- -size:是允许被继承的.
设置盒模型的属性的响应式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <h2>
        php.cm
    </h2>
    <div>
    </div>
</body>
</html>

html {
    /* 1em=px */
    font-size: 20px;
}
body div:first-of-type{
    font-size: 1em;
    width: 100px;
    height: 100px;
    background-color: aqua;
}

盒子的css设置在hetmlfont-size=20px，1em变成20px可以全局作用,具有继承性

html {
    /* 1em=px */
    font-size: 20px;
}
body div:first-of-type{
    font-size: 1em;
    width: 100px;
    height: 100px;
    background-color: aqua;
}

em制作一组响应式的按钮组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <button class="btn small">按钮</button>
    <button class="btn normal">按钮</button>
    <button class="btn larger ">按钮</button>
</body>
</html>

.btn {
    background-color: antiquewhite;
    color: aqua;
    border:none;
    outline: none;
    padding: 0.5em 1em;
    border: 0.3em;
}
.btn:hover{
    opacity: 0.5;
    cursor: pointer;
    box-shadow: 0 0 3px cornflowerblue;
    transition: 0.3s;
}
.small {
    font-size: 10px;
}
.normal {
    font-size: 16px;
}
.larger {
    font-size: 22px;
}

rem应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <div class="pa">
        <h2>我</h2>
        <div class="papa">
            <p>你</p>
        </div>
    </div>
</body>
</html>

html {
    /* 16/0.8=12.8px=0.8em */
    /* 定义 */
    font-size: 0.8em;
}
.pa {
    /* 默认是1rem */
    font-size: 2rem;
}
.pa p {
    font-size: 4rem;
}

vw，vh

vw占屏幕宽的1/100
vh占屏幕高的1/100
应用于移动端布局，手机屏幕随尺寸改变改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

.box {
    width: 50vw;
    height: 80vh;
    background-color: crimson;
    margin: auto ;
}