Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em，rem，vw，vh的原理与应用场景
Blogger Information
Blog 11
fans 0
comment 1
visits 7828
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，vw，vh的原理与应用场景
一代宗师
Original
1752 people have browsed it

em，rem的原理与应用场景

1.em：em通常用于依赖字号的元素属性上，比如margin、padding、width、height等元素；
2.rem：root em的缩写，通常用于font-size字号的设置上；
3.px：通常用于边框宽度border的设置上
4.em是根据它的父级来改变大小而rem只会随着root根元素的大小来改变

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em,rem的原理与应用场景</title>
  8.     <style>
  9.         :root {
  10.           font-size: 0.7em;
  11.         }
  12.         .news {
  13.           background-color: #ccc;
  14.           border: #000 solid 1px;
  15.           padding: 1em;
  16.           margin: 1em;
  17.         }
  18.         .news h2 {
  19.           font-size: 3rem;
  20.         }
  21.         .news1 {
  22.           font-size: 1.25rem;
  23.           text-indent: 2em;
  24.         }
  25.       </style>
  26. </head>
  27. <body>
  28.       <div class="news">
  29.         <h2>1217作业</h2>
  30.         <div class="news1">
  31.           <p>按自己理解的方式详细描述em,rem的原理与应用场景 ，并实例演示 2. 分析 rem / em /vh/ vw的区别与联系</p>
  32.         </div>
  33.       </div>
  34. </body>
  35. </html>

vh,vw的应用

1、vw：表示视口的宽度，1vw就表示当前视口宽度的百分之一；
2、vh：表示视口的高度，1vh就表示当前视口高度的百分之一；
3、vmin：表示在vw与vh中取最小值；
4、vmax：表示在vw与vh中取最大值

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>vh/vw</title>
  7.     <style>
  8.         * {
  9.           margin: 0;
  10.           padding: 0;
  11.           box-sizing: border-box;
  12.         }
  14.         .box1 {
  15.           background-color: blue;
  16.           width: 50vw;
  17.           height: 25vh;
  18.         }
  19.         .box2 {
  20.           background-color: coral;
  21.           width: 50vw;
  22.           height: 25vh;
  23.         }
  24.         .box3 {
  25.           background-color: blanchedalmond;
  26.           width: 50vw;
  27.           height: 25vh;
  28.         }
  29.       </style>
  30. </head>
  31. <body>
  32.     <div class="box1"></div>
  33.     <div class="box2"></div>
  34.     <div class="box3"></div>
  35. </body>
  36. </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