描述em/rem/vh/vw/的区别与联系

em与rem:

em原理:

em是浏览器文本默认字号相对关键字，通常是16px
em的值是不固定的是继承它的父元素(font-size)

rem原理:

rem根据html的所有后代元素进行计算
rem就是一个有固定值的em

em与rem的区别：

rem是相对于根元素（html）的字体大小，rem是引用根元素字号
em是相对于其父元素的字体大小,em是引用最近的字号,

<style>
html{
    //em的初始值就是用户代理的值,默认就是16px
    //1em = 20px
            font-size: 1.25em;
        }
        h2{
            //1.5rem：1.5 * 20 = 30px
            font-size: 1.5rem;
        }
        h2 span{
            //1rem： 1 * 20 = 20px
            font-size: 1rem;
        }
        p{
          //1.8rem：1.8 * 20 = 36px
          font-size: 1.8rem;
        }
        //2rem：2 * 20 = 40
        p i{
          font-size: 2rem;
        }
    </style>
  </head>
  <body>
    <h2>php.cn <span>php中文网</span></h2>
    <p>今天天气真不错<i>适合睡懒觉</i></p>
  </body>

示例:

vh与vw:

 vh: 视口的"初始包含块"的高度的百分之一(1/100) 1vh = 视口高度的1%
假如浏览器的高度为1000px，那么1vw就等于10px（1000px/100）
 vw: 视口的"初始包含块"的宽度的百分之一(1/100) 1vw = 视口宽度的1%
假如浏览器的宽度为5000px，那么1vw就等于50px（5000px/100）

<style>
         .box{
             width: 50vw;
             height: 25vh;
             background-color: violet;
             margin: auto;
         }
 </style>
<body>
    <div class="box"></div>
</body>

示例:

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

最小值vmin:
<style>
       .box{
            width: 80vmin;
            height: 80vmin;
            background-color: lightgreen;
            margin: auto;
        }
</style>
<body>
    <div class="box"></div>
</body>

示例:

最大值vmax:
<style>
        .box{
            width: 80vmax;
            height: 80vmax;
            background-color: lightgreen;
            margin: auto;
        }
</style>
<body>
    <div class="box"></div>
</body>

em与rem:

em原理:

rem原理:

em与rem的区别：

示例:

vh与vw:

示例:

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

示例:

示例:

相关文章