Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位
Blogger Information
Blog 145
fans 7
comment 7
visits 164588
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
CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1642 people have browsed it

CSS自适应布局中常见的em和rem的区别

1、当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
2、当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。em的值是相对于使用em单位的元素的字体大小；如果当前元素没有设置字体大小，则em默认继承父级的字号大小
3、em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值,单em和rem的参考基准值不同；
4、em和rem总结：

  • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  • em 单位基于使用他们的元素的字体大小。
  • rem 单位基于 html 元素的字体大小。
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小。
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  • 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
  • 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem -改用 %。
  • 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

常见的视口单位应用

1、视口单位vh、vw常用用于移动端布局：通常是把视窗口的宽高按100份等分，单位即vh和vw;vh和vm总是与视口的高度和宽度有关。
2、与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小

代码练习

1、代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>rem和em以及视口单位的使用</title>
  8.     <style>
  9.         /* html在谷歌浏览器下默认字体字号为16px */
  10.         .one span{
  11.             font-size:1.5rem;//等于24px,rem的值是以根元素的字体大小为基准的
  12.         }
  13.         .two{
  14.             font-size:2rem;//等于32px
  15.         }
  16.         .two span{
  17.             /* 继承父级的字体字号大小 等同与设置了font-size:2rem;也就是字号设置32px*/
  18.             width: 10em;//10*32px=320px; em的值是以使用em元素的字体大小为基准值的,如果元素没有设置字体大小的值则继承父级的字体的值
  19.             padding:0 1em;;
  20.             background-color: #42B983;
  21.         }
  22.         .three{
  23.             font-size:2em;//实际字号大小:2*16px=32px;
  24.         }
  25.         .three span{
  26.             font-size:2em;//实际字号大小:2*32px=64px;
  27.         }
  28.         /* 通常设置字体用rem,设置宽、高、margin、padding用em;但设置边框强烈建议使用px; */
  29.         .window{
  30.             /* 移动端布局通过视窗的vh和vw来设置盒子的自适应宽高 */
  31.             width: 50vw;
  32.             height:50vh;
  33.             background-color: lightcyan;
  34.             margin:0 auto;
  35.             position:relative;
  36.         }
  37.         .win{
  38.             /* 通过vmin和vmax来设置盒子的宽高，通过vmin设置宽高，总以最短的边来设置宽高，而vmax则是以最长的来设置宽高 */
  39.             width: 25vmax;
  40.             height:25vmax;
  41.             padding: 1vw 1vh;
  42.             background-color: lightgreen;
  43.             position: absolute;
  44.             top:0;
  45.             left: 0;
  46.             bottom:0;
  47.             right:0;
  48.             margin:auto;
  49.         }
  50.         .w{
  51.             width: 15vmin;
  52.             height:15vmin;
  53.             background-color: red;
  54.             position: absolute;
  55.             top:0;
  56.             left: 0;
  57.             bottom:0;
  58.             right:0;
  59.             margin:auto;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <div class="one">
  65.         <span>种业圈</span>
  66.     </div>
  67.     <div class="two">
  68.         <span>种业圈</span>
  69.     </div>
  70.     <div class="three"><span>种业圈</span></div>
  71.     <div class="window">
  72.         <div class="win">
  73.             <div class="w">
  75.             </div>
  76.         </div>
  77.     </div>
  78. </body>
  79. </html>

2、运行结果：

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