Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em、rem和px的实用场景以及vw、vh的初体验
Blogger Information
Blog 13
fans 0
comment 0
visits 10448
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和px的实用场景以及vw、vh的初体验
微光
Original
757 people have browsed it

1、em、rem与px的实用场景

1.1 在html代码中，使用较多的单位是相对单位em、rem以及固定单位px。他们的实用场景分别是：

1、em：通常用于依赖字号的元素属性上，比如margin、padding、winth、height等元素；
2、rem：root em的缩写，通常用于font-size字号的设置上；
3、px：通常用于边框宽度border的设置上。

1.2 在html代码中，rem只会随着root根元素的大小来改变；而em是随着它的父级来改变，所以使用中是多加注意。

下面用一段代码来演示：

  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>123</title>
  4.     <style>
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: inherit;
  9.       }
  10.       :root,
  11.       ::after,
  12.       ::before {
  13.         background-color: #eee;
  14.         box-sizing: border-box;
  15.       }
  16.       header {
  17.         background-color: #0072b0;
  18.         color: #ffffff;
  19.         border-radius: 0.5em;
  20.         border: 2px solid red;
  21.       }
  22.       .box1,
  23.       .box2 {
  24.         background-color: #cccccc;
  25.         border-radius: 1em;
  26.         padding: 1em;
  27.         /* float: left; */
  28.         margin-top: 1em;
  29.         display: table-cell;
  30.       }
  31.       .box1 {
  32.         width: 70%;
  33.         height: 30vh;
  34.       }
  35.       .box2 {
  36.         width: calc(30% - 1em);
  37.         margin-left: 1em;
  38.       }
  39.       .continal {
  40.         display: table;
  41.         width: 100%;
  42.         border-spacing: 1.5em 0;
  43.       }
  44.       .box3 {
  45.         margin-left: -1.5em;
  46.         margin-right: -1.5em;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <header>
  52.       <h1>woaiasdasdas</h1>
  53.     </header>
  54.     <div class="box3">
  55.       <div class="continal">
  56.         <div class="box1"></div>
  57.         <div class="box2"></div>
  58.       </div>
  59.     </div>
  60.   </body>

2、vw、vh的初体验

在响应式布局中还有一些不能忽略的元素属性，那就是vw、vh以及vmin、vmax。它们常用于移动端的布局之中。

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

下面用一段代码用vw与vh来演示一个三行单例的色块：
  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>123</title>
  4.     <style>
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: inherit;
  9.       }
  10.       :root,
  11.       ::after,
  12.       ::before {
  13.         background-color: #eee;
  14.         box-sizing: border-box;
  15.       }
  16.       .box4,
  17.       .box5,
  18.       .box6 {
  19.         width: 50vw;
  20.       }
  22.       .box4 {
  23.         background-color: blue;
  24.         height: 25vh;
  25.       }
  26.       .box5 {
  27.         background-color: chartreuse;
  28.         height: 25vh;
  29.       }
  30.       .box6 {
  31.         background-color: brown;
  32.         height: 25vh;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="box4"></div>
  38.     <div class="box5"></div>
  39.     <div class="box6"></div>
  40.   </body>
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