search

博客列表 >em与rem，vw与vh

em与rem，vw与vh

小狐的博客
小狐的博客原创
2020年12月22日 17:40:25741浏览

八、em/rem 与响应式布局

1、em

em 是浏览器的默认字号，一般是 16px
1em = 16px，h2 标签是 1.5em = 24px
font-size 是可以被继承的，继承自他们的祖先元素（body、html）

（1）em 用在哪

用于响应式布局，动态调整标签大小

  1. <style>
  2.   /* 设置响应式的文本字号 */
  3.   /* font-size: 是允许被继承的 */
  4.   /* 当前h2的字号,继承自它的祖先元素(body , html) */
  6.   /* 想改变h2的字号,大小 */
  7.   html {
  8.     font-size: 20px;
  9.   }
  11.   body div:first-of-type {
  12.     /* 1em = 20px */
  13.     font-size: 1em;
  14.     /* 从现在起请忘记像素px */
  15.     /* width: 100px;
  16.        height: 100px; 
  17.     */
  18.     /* 10em : 10 * 20 = 200px */
  19.     width: 10em;
  20.     /* 8em : 8 * 20 = 160px */
  21.     height: 8em;
  22.     background-color: lightgreen;
  23.   }
  25.   /* 因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了 */
  26.   body div {
  27.     /* 2倍em就是40px，套用上面的声明，宽度400px，高度320px */
  28.     font-size: 2em;
  29.   }
  30. </style>
  32. <body>
  33.   <!-- 这里的h2字号，就变成 20*1.5 = 30px -->
  34.   <!-- 因为font-size会继承祖先元素，因此span的font-size与h2一样 -->
  35.   <h2>www.10010.com<span>联通网厅</span></h2>
  36.   <div></div>
  37. </body>

（2）em 模仿 layui 按钮

  1. <style>
  2.   /* 基本样式 */
  3.   .btn {
  4.     /* 背景色 */
  5.     background-color: #1e9fff;
  6.     /* 字体颜色 */
  7.     color: #fff;
  8.     /* 去掉边框 */
  9.     border: none;
  10.     /* 去掉轮廓线 */
  11.     outline: none;
  12.     /* 外边距 */
  13.     padding: 0.5em 1em;
  14.     /* 设置圆角 */
  15.     border-radius: 0.3em;
  16.   }
  18.   /* 鼠标悬停样式 */
  19.   .btn:hover {
  20.     /* 透明度 */
  21.     opacity: 0.8;
  22.     /* 将鼠标设置为手型 */
  23.     cursor: pointer;
  24.     /* 边框阴影：外发光 */
  25.     box-shadow: 0 0 3px #888;
  26.     /* 动画延迟（变淡的效果） */
  27.     transition: 0.3s;
  28.   }
  30.   /* 如果想设置三个不同的大小的按钮,只需要为这个三个按钮指定不同的字号就可以 */
  31.   /* 较小的 */
  32.   .small {
  33.     font-size: 10px;
  34.   }
  36.   /* 正常的 */
  37.   .normal {
  38.     font-size: 16px;
  39.   }
  41.   /* 较大的 */
  42.   .larger {
  43.     font-size: 22px;
  44.   }
  45. </style>
  46. <body>
  47.   <button class="btn small">Button</button>
  48.   <button class="btn normal">Button</button>
  49.   <button class="btn larger">Button</button>
  50. </body>

2、rem

rem 的定义

定义：

由于 em 具有继承性，因此需要一个引用根元素中字号大小的关键字：rem，他是一个具有固定值的 em
rem 主要用于设置字号，而em则根据字号，动态设置元素大小的属性值

  1. <style>
  2.   html {
  3.     /* em的初始值就是用户代理的值,默认就是16px */
  4.     /* 1em = 20px; */
  5.     font-size: 1.25em;
  6.     /* 此时1em = 20px */
  8.     /* 当前font-size属性出现在了html中 */
  9.     /* html叫根元素,一个页面中它是唯一的且是最大的包含块 */
  10.     /* 所以,在html中定义的em大小,可看成一个常量(固定的值) */
  11.     /* html的所有后代元素,如果想引用html中的字号,就不能再用em了 */
  12.     /*   */
  13.   }
  15.   h2 {
  16.     /* 1.5rem : 1.5 * 20px = 30px; */
  17.     font-size: 1.5rem;
  18.   }
  20.   h2 span {
  21.     /* 1rem = 1 * 20px = 20px */
  22.     font-size: 1rem;
  23.   }
  24. </style>
  26. <body>
  27.   <!-- span = 1rem，不再受到祖先元素的影响 -->
  28.   <h2>www.10010.com<span>联通网厅</span></h2>
  29. </body>

九、视口单位（vh/vw）

视口：可视窗口，即浏览器中用于显示文档的可视区域
vh: 视口高度的百分比（50vh = 50%）
vw: 视口宽度的百分比（50vw = 50%）
初始包含块: 目前 可以简单的理解为html

  1. <style>
  2.     /* 宽度与高度分别占据可视窗口的 50% */
  3.     .box {
  4.         width: 50vw;
  5.         height: 50vh;
  6.         background-color: lightgreen;
  7.         margin: auto;
  8.     }
  10.     /* 如何画出一个正方形 */
  11.     /* 宽度与高度，谁小以谁为准 */
  12.     .box {
  13.         width: 80vmin;
  14.         height: 80vmin;
  15.         background-color: lightgreen;
  16.         margin: auto;
  17.     }
  19.     /* 宽度与高度，谁大以谁为准 */
  20.     .box {
  21.         width: 80vmax;
  22.         height: 80vmax;
  23.         background-color: lightgreen;
  24.         margin: auto;
  25.     }
  26. </style>
  28. <body>
  29.     <div class="box"></div>
  30. </body>
上一条：阐述float和position的作用，并利用定位做一个拟态框案例下一条：神奇盒子魔方变幻：box-sizing属性和常用的元素居中方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多