Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 相对单位em/rem/vh/vw 的区别和联系
Blogger Information
Blog 23
fans 0
comment 3
visits 23621
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/vh/vw 的区别和联系
a.
Original
1320 people have browsed it

em和rem

  • em
    • em具有继承性
    • em不是固定的，继承于父元素的font-size字号大小
  • rem
    • rem的字号大小相对于根元素(html)
    • 如果根元素没有设置字号，则默认为16px（绝大多数浏览器）
  • em和rem的区别
    • em的字号大小承继于父元素的font-size大小
    • rem的字号大小等于根元素或当前元素设置的字号大小
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. html{
  8.     font-size:1.8px;
  9.     }
  10. body{
  11.     font-size:2px;
  12.     }
  13.     .p1{font-size:10em;}
  14.     .p2{font-size:10rem;}
  15. </style>
  16. </head>
  18. <body>
  19. <p class="p1">这是一个段落。</p>
  20. <p class="p2">这又是一个段落。</p>
  22. </body>
  23. </html>

使用em和rem动态响应页面案例

  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.     <title>em,rem</title>
  8.     <style>
  9.       html {
  10.         /*1.25*16=20px*/
  11.         font-size: 1.25em;
  12.       }
  13.       .box {
  14.         /*1.1*20=22px*/
  15.         font-size: 1.1rem;
  16.         /*22*0.9=19.8px*/
  17.         padding: 0.9em;
  18.         margin: 0.3em;
  19.         border: solid 1px;
  20.         border-radius: 0.75em;
  21.         background-color: rgba(15, 9, 9, 0.13);
  22.       }
  23.       .title {
  24.         margin: 0.3em;
  25.       }
  26.       .content {
  27.         font-size: 0.8rem;
  28.         text-indent: 2.1em;
  29.         line-height: 2;
  30.       }
  31.       @media screen and (min-width: 600px) {
  32.         html {
  33.           font-size: 1.3rem;
  34.         }
  35.         .box {
  36.           background-color: rgb(94, 235, 199);
  37.         }
  38.       @media screen and (min-width: 800px) {
  39.         html {
  40.           font-size: 1.4rem;
  41.         }
  42.         .box {
  43.           background-color: skyblue;
  44.         }
  45.         @media screen and (min-width: 1000px) {
  46.         html {
  47.           font-size: 1.6rem;
  48.         }
  49.         .box {
  50.           background-color: rgb(230, 204, 89);
  51.         }
  52.       }
  53.       @media screen and (min-width: 1200px) {
  54.         html {
  55.           font-size: 1.8rem;
  56.         }
  57.         .box {
  58.           background-color: rgb(243, 164, 61);
  59.         }
  60.         @media screen and (min-width: 1400px) {
  61.         html {
  62.           font-size: 2rem;
  63.         }
  64.         .box {
  65.           background-color: rgb(77, 206, 238);
  66.         }
  67.       /*
  68.       @media screen and (min-width: 800px) {
  69.         /* 14/16 = 0.875em */
  70.       /*
  71.         html {
  72.           font-size: 0.875em;
  73.         }
  75.         .box {
  76.           background-color: wheat;
  77.         }
  78.       }
  79.       */
  80.     </style>
  81.   </head>
  82.   <body>
  83.     <div class="box">
  84.       <h2 class="title">我国5个新冠病毒疫苗进行Ⅲ期临床试验</h2>
  85.       <p class="content">
  86.         新华社北京12月16日电（记者陈芳、董瑞丰）“我国目前已有5个新冠病毒疫苗进行Ⅲ期临床试验，数量位于全球前列。”国务院联防联控机制科研攻关组疫苗研发专班工作组组长、国家卫健委医药卫生科技发展研究中心主任郑忠伟日前接受新华社记者专访时说，“疫苗研发已经进入冲刺阶段，我们处于全球第一方阵，但不为第一而抢跑。”
  87.       </p>
  88.     </div>
  89.   </body>
  90. </html>

vh和vw

  • vw是相对于浏览器显示html文档的可视窗口宽度比例单位，如视口宽度为1900px,那么1vw=19px
  • vh是相对于浏览器显示html文档的可视窗口高度比例单位，如视口宽度为900px,那么1vh=9px
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>vh和vw</title>
  6. <style>
  7.     .box{
  8.     height:50vh;
  9.     width:50vw;
  10.     background-color:red;
  11.     }
  12. </style>
  13. </head>
  15. <body>
  17.     <div class="box">我是一个盒子</div>
  19. </body>
  20. </html>

vmin和vmax

  • vmin：取当前Vw和Vh中较小的那一个值
  • vmax：取当前Vw和Vh中较大的那一个值

    此时上面的盒子都显示为正方形

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