Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em,rem的原理与应用场景，并实例演示rem / em /vh/ vw的区别与联系
Blogger Information
Blog 37
fans 2
comment 0
visits 26505
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
em,rem的原理与应用场景，并实例演示rem / em /vh/ vw的区别与联系
世纪天城
Original
1237 people have browsed it

em原理与应用
em,rem的运用
1.什么是em?
em: 是浏览器文本的默认字号的相对关键字,大多数浏览器em通常是16px
2.em应用在哪 ?
设置响应式的文本字号，font-size: 是允许被继承的；当前元素的字号,继承自它的父级及其祖先元素(body , html)
注：当前p元素的 font-size: 为1em是 则继承了body设置的16px；如果body设置20排序，则当前元素的1em为20px；em也可以用于任何元素
3.设置盒模型的属性的响应式

  1. em也可以用于设置盒模型的属性的响应式
  2. <div class="div1"></div>  
  3. <hr>
  4. 如果给当前元素设置font-size: 设置 则重新定义像素
  5. <div class="div2"></div> 
  6. 因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了

rem

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         html{
  10.             /* 设置根元素字号 */
  11.             font-size: 20px;
  12.         }
  13.         /* 后面就可以直接使用"rem"来引用定义字号或其它属性 */
  14.         div{
  15.             /*此时 1.5rem : 1.5 * 20px = 30px; */
  16.             font-size: 1.5rem;
  17.             width: 10em;/*宽度为 10em*20排序=300px*/
  18.             height: 10em;
  19.             background-color: burlywood;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div></div>
  25. </body>
  26. </html>
  1. 以后的字号,强烈推荐使用rem设置,元素用em设置


vh 与 vw

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>视口单位: vh / vw</title>
  8.     <style>
  9.         div{
  10.             width: 80vw; /*宽度的80%*/
  11.             height: 100vh;/*高度的100%*/
  12.             background-color: cyan;
  13.             margin: auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div>
  19.         <p>视口: "可视窗口",浏览器窗口中用于显示文档的可视区域</p> 
  20.         <p>vh: 视口的"初始包含块"的高度的百分之一(1/100)
  21.             vw: 视口的"初始包含块"的宽度的百分之一(1/100) 
  22.             初始包含块: 目前 可以简单的理解为"html"
  23.             这个主要用于移动端布局
  24.         </p>
  25.     </div>
  27. </body>
  28. </html>

总结：em，rem 主要用于内容区的自适应元素，而vh，vw用于设置不同设备的可视窗口。

综合小案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>em实现响应式布局</title>
  9.     <style>
  10.         html{
  12.             font-size: 1em;
  14.         }
  15.         main{
  16.             width: 100vw;
  17.             height: 100vh;
  18.             background-color: indianred;
  19.         }
  20.         /* vmax,vw,vh同为视口单位 */
  21.         /* 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax */
  22.         /* vw/vh/vmin/vmax是视窗单位，也是相对单位。相对的不是父节点或页面的根节点，而是由视窗（viewport）的大小决定的，单位1，代表类似于1% */
  23.         /* main{
  24.             width: 80vmax;
  25.             height: 80vmax;
  26.             background-color: lightgreen;
  27.             margin: auto;
  28.         } */
  29.         div{
  30.             width: 30em;
  31.             height: 15em;
  32.             background-color: burlywood;
  33.             margin: auto;
  34.             box-sizing: border-box;
  35.             padding: 1em;
  36.         }
  37.         h3{
  38.             color: chocolate;
  39.         }
  40.         p{
  41.             font-size: 0.8rem;
  42.             text-indent: 2em;
  43.             color: #a1a1a1ee;
  44.         }
  45.         /* 屏幕宽度 >= 800px, 字号放大到30px */
  46.         @media screen and (min-width: 800px) {
  47.             html{
  48.                 font-size: 1.5em;
  49.             }
  50.             div{
  51.                 background-color: cornflowerblue;
  52.             }
  53.         }
  54.         @media screen and (min-width: 1200px) {
  55.             html{
  56.                 font-size: 1.8em;
  57.             }
  58.             div{
  59.                 background-color: rgb(234, 252, 252);
  60.             }
  61.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <main>
  67.         <div>
  68.             <h3>响应式页面的实现</h3>
  69.             <p>目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局，以后介绍bootstrap的时候来介绍栅格布局，这里主要来说一下如何利用媒体查询实现响应式布局。
  70.                 媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式，所以将媒体查询相关的代码放在css文件的最下方即可。</p>
  71.         </div>
  72.     </main>
  73. </body>
  74. </html>



Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post