浅谈em、rem、vh、vw

em、rem

em是浏览器文本的默认字号的相对关键字,大多数浏览器em通常默认是16px；
em是个相对长度单位，这个单位表示元素的 font-size 的计算值，继承父级元素的字号大小；
rem这个单位代表根元素（通常为<html> 元素）的 font-size 大小，相对固定一些，根元素的字号大小不变时，它可以看成一个常量；
定义边框大小不能用em或者rem，要用px。

html{
    /* 设置根元素字号大小 */
    font-size: 10px;
}
/* 直接使用"rem"来引用定义字号或其它属性 */
div{
    /*此时 3rem : 3 * 10px = 30px; */
    font-size: 3rem;
    width: 20em;/*宽度为 20 *30px = 600px*/
    height: 20em;
    background-color: red;
}

响应式按钮应用

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>响应式按钮</title>
        <style>
            html{
                /* 设置根元素字号大小 */
                font-size: 10px;
            }
            .btn{
                /* 设置按钮背景颜色 */
                background-color: lightgreen;
                /* 按钮字体颜色设定 */
                color: coral;
                /* 去掉边框 */
                border:none;
                /* 去掉单击轮廓线 */
                outline: none;
                /* 内边距 */
                padding: 0.5rem 1rem;
                border-radius: 0.3rem;
            }
            /* 鼠标移上悬停效果 */
            .btn:hover{
                /* 透明度 */
                opacity: 0.8;
                /* 将鼠标设置为手型 */
                cursor: pointer;
                /* 阴影效果 */
                box-shadow: 0 0 3px #888;
                /* 阴影效果延时 */
                transition: 0.3s;
            }
            .small{
                font-size: 1rem;
            }
            .normal{
                font-size: 2rem;
            }
            .larger{
                font-size: 3rem;
            }
        </style>
    </head>
    <body>
        <button class="btn larger">Button</button>
        <button class="btn normal">Button</button>
        <button class="btn small">Button</button>
    </body>

vh、vw 视口百分比长度定义相对于文档的可见部分大小的值。

vh是视口的初始包含块高度的 1%;
vw是视口的初始包含块宽度的 1%；
vh、vw在移动端布局使用最多；
vmin和vmax可以用来指定视口高度 vw 和宽度 vh 两者之间的最小值和最大值。

div{
    width: 80vw; /*宽度的80%*/
    height: 100vh;/*高度的100%*/
    background-color: cyan;
}

/*使用vmin或vmax，可得到正方形*/
div{
    width: 80vmin; 
    height: 80vmin;
    background-color: cyan;
}

总结：
em,rem,vh,vw都是相对值，不是绝对值；

em是相对于父元素的字体大小，
rem是相对于根元素的字体大小，
vh是相对于视口高度的百分比,
vw是相对于视口的宽度百分比，
vmax限定元素的视口宽度和高度的最大值，
vmin限定元素的视口宽度和高度的最小值。

浅谈em、rem、vh、vw

浅谈em、rem、vh、vw

响应式按钮应用

相关文章