search

博客列表 >CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位

CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年12月18日 14:08:201640浏览

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、运行结果：

上一条：实例演示CSS优先级权重叠加计算及属性简写下一条：相对单位em/rem/vh/vw 的区别和联系
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多