Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020学习新方法总结：em,rem,px的应用场景,区别与联系
Blogger Information
Blog 65
fans 2
comment 0
visits 60246
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
2020学习新方法总结：em,rem,px的应用场景,区别与联系
张福根一修品牌运营
Original
764 people have browsed it

实例演示,em,rem,px的应用场景,em,rem的区别与联系

效果展示

em,rem,px的应用场景

效果源码

  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,px的应用场景,em,rem的区别与联系</title>
  7.     <style>
  8.       :root {
  9.         font-size: 1.25em;
  10.         /* font-size: 16*1.25=20px; */
  11.       }
  12.       .css-em {
  13.         /*  em: 依赖字号的属性的 */
  14.         font-size: 0.8em;
  15.         /* font-size:20px*0.8=16px */
  16.         width: 20em;
  17.         /* width: 16*20=320px */
  18.         height: 10em;
  19.         /* height:10*16=200px */
  20.         border: 1px solid cadetblue;
  21.         margin: 1em;
  22.         /* margin:1*16=16px */
  23.         padding: 1em;
  24.         /* padding:1*16=16px */
  25.       }
  26.       .css-rem {
  27.         /* rem相对于根元素字号20px进行计算 */
  28.         font-size: 1rem;
  29.         /* 1*20=20px */
  30.         border: 1px solid chocolate;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="css-em">em应用场景</div>
  36.     <div class="css-rem">rem应用场景</div>
  37.   </body>
  38. </html>

效果总结

  • rem: 相对尺寸，用在font-size,设置字号,尽可能不要用在:root
  • em:相对尺寸，在依赖字号的属性的上,padding,margin,width, height,….
  • px: 绝对尺寸,适用border
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