简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > em、rem的区别，vh、vw及视口
Blogger Information
Blog 13
fans 0
comment 2
visits 14178
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及视口
华宥为
Original
1216 people have browsed it

em相对于父元素，rem相对于根元素。

一、em

（一）子元素字体大小的em是相对于父元素字体大小

（二）元素的width/height/padding/margin用em的话是相对于该元素的font-size

代码：

html：

  1. <div>
  2.     父元素div
  3.     <p>
  4.        子元素p
  5.         <span>孙元素span</span>
  6.     </p>
  7. </div>

css:

  1. div {
  2.         font-size: 40px;
  3.         width: 7.5em; /* 300px */
  4.         height: 7.5em;
  5.         border: solid 2px black;
  6.     }
  7.  p {
  8.         font-size: 0.5em; /* 20px */
  9.         width: 7.5em; /* 150px */
  10.         height: 7.5em;
  11.         border: solid 2px blue ;
  12.         color: blue;
  13.     }
  14. span {
  15.         font-size: 0.5em;
  16.         width: 7.5em;
  17.         height: 7.5em;
  18.         border: solid 2px red;
  19.         display: block;
  20.         color: red;
  21.     }

二、rem

rem是全部的长度都相对于根元素，根元素是<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

代码：

html：

  1. <div>
  2.     父元素div
  3.     <p>
  4.        子元素p
  5.         <span>孙元素span</span>
  6.     </p>
  7. </div>

css:

  1. html {
  2.         font-size: 10px;
  3.     }
  4.     div {
  5.         font-size: 4rem; /* 40px */
  6.         width: 20rem;  /* 200px */
  7.         height: 20rem;
  8.         border: solid 2px black;
  9.     }
  10.     p {
  11.         font-size: 2rem; /* 20px */
  12.         width: 10rem;
  13.         height: 10rem;
  14.         border: solid 2px blue;
  15.         color:blue ;
  16.     }
  17.     span {
  18.         font-size: 1.5rem;
  19.         width: 5rem;
  20.         height: 5rem;
  21.         border: solid 2px red;
  22.         display: block;
  23.         color: red;
  24.     }

视口单位(Viewport units)

在PC端，视口指的是在PC端，指的是浏览器的可视区域；

而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范，视口单位主要包括以下4个：

  1.   1.vw：1vw等于视口宽度的1%。
  3.   2.vh：1vh等于视口高度的1%。
  5.   3.vmin：选取vw和vh中最小的那个。
  7.   4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

视口变化直接影响元素的变化：

图一 全屏显示色块样式

图二 压缩视口色块的变化

代码：
html：

  1.     <div class="left">left</div>
  2.     <div class="right">right</div>

css：

  1.     * {
  2.         padding: 0;
  3.         margin: 0
  4.     }
  6.     .left {
  7.         float: left;
  8.         width: 50vw;
  9.         height: 20vh;
  10.         background-color: blue;
  11.         text-align: center;
  12.         line-height: 20vh;
  13.         font-size: 3rem
  14.     }
  16.     .right {
  17.         float: right;
  18.         width: 50vw;
  19.         height: 20vh;
  20.         background-color: green;
  21.         text-align: center;
  22.         line-height: 20vh;
  23.         font-size: 3rem
  24.     }
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！