rem 、em、vh、 vw

em

em的初始值是用户代理的值 默认是16px

1.什么是em

 em是浏览器文本的默认字号的相对关键字，通常是16px
 1em=16px
 html font-size是em的基本像素

2.用在哪？

2.1设置响应式的文本字号
font-size属性是允许被继承的 当前h2 的字号继承自他的祖先元素 body html inherited form html
想改变h2的字号 修改html的字号即可=

 ```
 <h2>pph.cn</h2>
 ```

2.2设置盒模型的属性的响应式;

```
div{
    /*1em为16px  */
    width:100px;
    height:100px;
    /*响应式不使用px
    10em=10*16*/
    width:10em;
    height:10em;
} 

3.em/rem定义字号

em的初始值是用户代理的值 默认是16px
html {
font-size: 1.25em;
}
/ 此时1em=20px /
/* em动态性和继承性 但是也有缺点
需要固定值的em 不能随着祖先元素的字号大小变化
用rem可以解决 rem就是一个固定值的em

        html根元素 一个页面中它是唯一的且是最大的包含块
        所以在html中定义的em大小,可以看作是一个常量 固定值
        因为rm巨有继承性,此时我们用一个新的关键字来引用根元素中的字号大小的值 rem
     */
    h2 {
        font-size: 1.5rem;
    }
    span {
        font-size: 0.5rem;
    }

em实现响应式布局

/* 设置根元素字号 */
        html {
            /* font-size: 12px; */
            font-size: 0.75em;
            /* 后面可以直接使用rem来引用12px来定义字号 */
        }
        .panel {
            font-size: 1rem;
            /* 此时当前元素中的其他属性 如果用到em就是1rem(12px) */
            padding: 1rem;
            border-radius: .3rem;
            /* 边框不能用em/rem 一定要用px */
            border: 1px solid #999;
            margin: 2rem 0;
            background-color: aquamarine;
        }
        /* rem用在字号中 除了字号都可以用em*/
        .panel h2 {
            /* 以后的字号强烈推荐使用rem设置 */
            font-size: 1.2rem;
        }
        .panel p {
            font-size: 1.1rem;
            text-indent: 2em;
            line-height: 1.5;
        }
        /* 响应式 媒体查询 */
        @media screen and (min-width:640px) {
            html {
                font-size: 0.875em;
            }
            .panel {
                background-color: bisque;
            }
        }
        @media screen and (min-width:1000px) {
            html {
                font-size: 1em;
            }
            .panel {
                border-right-color: cadetblue;
            }
        }
        @media screen and (min-width:1200px) {
            html {
                font-size: 1.25em;
            }
            .panel {
                background-color: #ccc;
            }
        }

视口 vh vw

如何得到一个正方形区块

.box{
    width:80vmin;
    height:80vmin;
    background-color:#cccl
    margin:auto;
}
<div class='box'></div>

>css扩展
css预处理器  用js来编译css代码 less sass
css原生变量/自定义属性 
body{
    --color:#f00;
    --active-color:#0f0;
    --a-border:1px solid
}
a {
    color:var(--color);
}
a:hover{
    color:var(--active-color);
    border:var(--a-border)
}