em,rem的原理与应用场景,分析 rem / em /vh/ vw的区别与联系

em,rem的原理

em与rem
1.em是浏览器文本的默认字号，通常是16px
2.em是个相对长度单位，这个单位表示元素的 font-size 的计算值，继承父级元素的字号大小
设置盒模型响应式属性
3.rem这个单位代表根元素（通常为<html> 元素）的 font-size 大小，相对固定一些，根元素的字号大小不变时，它可以看成一个常量；
4.rem取的html字号；em取得父级字号
5.边框不能用em或者rem，要用px

响应式按钮应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em制作一组响应式按钮组件</title>
    <style>
        .btn {
            background-color: deepskyblue;
            color: #fff;
            /* 去掉边框 */
            border: none;
            /* 去掉轮廓线 */
            outline: none;
            padding: 0.5em 1em;
            /* 边框圆角 */
            border-radius: 0.3em;
        }
        .btn:hover {
            /* 透明度 */
            opacity: 0.8;
            /* 将鼠标设置为手型 */
            cursor: pointer;
            /* 阴影效果 */
            box-shadow: 0 0 3px #888;
            transition: 0.3s;
        }
        .small {
            font-size: 10px;
        }
        .normal {
            font-size: 16px;
        }
        .larger {
            font-size: 22px;
        }
    </style>
</head>
<body>
    <button class="btn small">Button</button>
    <button class="btn normal">Button</button>
    <button class="btn larger">Button</button>
</body>
</html>

rem应用

因em: 动态性和继承性,但是也有缺点
我们非常的需要一个固定值的em,它不应该随着它自身和祖先元素的字号大小而变动
而用rem就可以解决掉, rem就是一个固定值的em
html在一个页面中它是唯一的且是最大的包含块,也叫根元素
所以,在html中定义的em大小,可看成一个常量(固定的值)
此时,我们用一个新的关键字rem来引用根元素中的字号大小font-size的值
以后的字号,强烈推荐使用rem设置,元素用em设置
注意：边框不能用em或者rem，要用px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem定义</title>
    <style>
        html{
            font-size: 1.25em;
        }
        h2{
            font-size: 1.5rem;
        }
        h2 span{
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <h2><span>php.cn</span></h2>
</body>
</html>

vh 与 vw

视口: “可视窗口”,浏览器窗口中用于显示文档的可视区域
vh: 视口的”初始包含块”的高度的百分之一(1/100)
vw: 视口的”初始包含块”的宽度的百分之一(1/100)
初始包含块: 目前可以简单的理解为”html”
这个主要用于移动端布局
vmin和vmax可以用来指定视口高度 vw 和宽度 vh 两者之间的最小值和最大值。

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

em,rem的原理

rem应用

vh 与 vw

更多相关文章

随机推荐