Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em、rem的原理与应用场景、rem/em/vh/vw区别于联系
Blogger Information
Blog 47
fans 3
comment 0
visits 38276
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
800 people have browsed it

em、rem的原理与应用场景、rem/em/vh/vw区别于联系

1.em、rem的原理与应用

  • 1.px是固定像素，一旦设置了就无法因为适应页面而改变
  • 2.em和rem相对于px更具有灵活性，因为它们长度不是定是的，更适用于响应式布局
    • 2-1.em和rem的区别一句话概括：em相对于父元素，rem相对于html根元素
    • 2-2.rem中的r意思是root（根源）
em盒子模型应用:
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>em的原理与应用</title>
  6.     <style>
  7.         html {
  8.             font-size: 20px;
  9.         }
  10.         /* 盒子模型的响应式 */
  11.         body:first-of-type div:first-of-type {
  12.             /* 1em = 20px */
  13.             font-size: 1em;
  14.             /* 10em * 20px = 200px */
  15.             width: 10em;
  16.             /* 8em * 20px = 160px */
  17.             height: 8em;
  18.             background-color: skyblue;
  19.         }
  21.         /* 因为盒子大小使用了em，所以后面只需要设置字号就可以响应式改变盒子的大小 */
  22.         body:first-of-type div:first-of-type {
  23.             font-size: 0.8em;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div></div>
  29. </body>
  30. </html>
演示截图:

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>rem定义字号</title>
  7.     <style>
  8.         html {
  9.             /* em的初始值就是（浏览器）用户代理的值，默认就是16px */
  10.             /* 1em = 20px */
  11.             font-size: 1.25em;
  12.             /* 此时 1em = 20px */
  14.             /* 当font-size出现在了html中 */
  15.             /* html叫根元素，一个页面中它是唯一的最大的包含块 */
  16.             /* 所以在html根元素中定义的em大小，可以看成是一个常量，固定的值 */
  17.             /* html所有后代元素，如果想引用html中的字号，就不能 再用em了 */
  18.             /* 因为em具有继承性 */
  19.             /* 此时我们用一个关键词来引用根元素中的字号大小font-size的值 */
  20.             /* 这个关键词就是：rem */
  21.         }
  22.         h1 {
  23.             /* 1.5rem :1.5 * 20px = 30px */
  24.             font-size: 1.5rem;
  25.         }
  26.         h1 span {
  27.             /* 1 * 20px =20px */
  28.             font-size: 1rem;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <h1>hello world <span>你好</span></h1>
  34. </body>
  35. </html>

演示截图

2.rem / em /vh/ vw的区别与联系

  • rem继承根html字号相对字号的固定值
  • em引用当前盒子或继承父级元素或祖先元素的font-size设置，如果都没有设置，则继承html根的字号设置
  • vh/vw视口单位，视口意思就是浏览器的可视区域，不包括地址栏、菜单栏、工具栏、状态栏
    • vh视口的初始包含块的高度百分之一(1/100)
    • vw视口的初识包含块的宽度百分之一(1/100)
    • 视口单位值按视口大小等比改变，主要用于移动端布局
  • vmin/vmax可视口最小/最大
    • width:80vmin / height:80vmin （无论怎么变换页面都是正方形）
    • width:80vmax / height:80vmax 手机横屏应用
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