search

博客列表 >浅析em/rem/vw/vh与响应式布局

浅析em/rem/vw/vh与响应式布局

培(信仰)
培(信仰)原创
2020年12月19日 00:23:16826浏览

浅析em/rem/vw/vh与响应式布局

什么是em rem

em是一种相对长度单位,相对于自身元素的字号大小,如果没有设置字号，则继承父元素的字号大小。
rem是根元素的字号大小。

  1.     <h2>hello</h2>
  2.     <div></div>
  1.         /* 一般浏览器默认16px 那么默认html的font-size就是1em=16px*/
  2.         h2 {
  3.             /* 1.5em=1.5*16px=24px */
  4.             font-size: 1.5em;
  5.         }
  7.         html {
  8.             /* 此时 1em=24px */
  9.             font-size: 1.5em;
  10.             /* 由于此次设置了font-size 那么此时h2 的 1.5em 就是 36px */
  11.         }
  13.         body div {
  14.             /* 1em=24px */
  15.             font-size: 1em;
  16.             /* 从现在起忘记像素px */
  17.             /* width: 300px;
  18.             height: 300px; */
  19.             background-color: violet;
  21.             width: 10em;
  22.             height: 8em;
  23.         }
  25.         /* 缩小盒子 */
  26.         body div {
  27.             /* 此时 1em=12px */
  28.             font-size: .5em;
  29.         }
  31.         /* 放大盒子 */
  32.         body div {
  33.             /* 此时 1em=48px */
  34.             font-size: 2em;
  35.         }
  37.         /* 盒子的字号font-size使用了em，所有只需要设置font-size属性就可以控制盒子大小 */

应用 ：用em制作一组响应式按钮组件

  1.     <button class="btn small">button1</button>
  2.     <button class="btn normal">button2</button>
  3.     <button class="btn larger">button3</button>
  1.         /* 基础样式 */
  2.         .btn {
  3.             background-color: #1e9fff;
  4.             color: #fff;
  5.             border: none;
  6.             outline: none;
  7.             padding: 0.5em 1em;
  8.             border-radius: 0.3em;
  10.         }
  12.         /* 伪类悬停 */
  13.         .btn:hover {
  14.             /* 透明度  0`1之间的值*/
  15.             opacity: 0.8;
  16.             /* 鼠标样式：将鼠标设置为手型 */
  17.             cursor: pointer;
  18.             box-shadow: 0 0 3px #888;
  19.             transition: 0.3s;
  20.         }
  22.         /* 如果想设置三个不同大小的按钮，只需要为这三个按钮指定不同的字号 */
  23.         .samll {
  24.             font-size: 10px;
  25.         }
  27.         .normal {
  28.             font-size: 16px;
  29.         }
  31.         .larger {
  32.             font-size: 24px;
  33.         }

简单理解：em是以自身font-size为基本单位；rem以html的font-size为基本单位

em实现响应式布局

  1.     <button>放大</button>
  2.     <div class="panel">
  3.         <h2>各种知名网站的404页面，看看谁更有创意？</h2>
  4.         <div class="panel-body">
  5.             <p>大厂的 404 页面都长啥样？看到最后一个，我笑了~
  6.                 每天浏览各大网站，难免会碰到404页面啊。你注意过404页面么？下面这些知名网站的404页面，以供大家欣赏，看看哪个网站更有创意</p>
  7.         </div>
  8.     </div>
  1.     <style>
  2.         html {
  3.             font-size: 0.75em;
  4.             /* 后面可以直接用rem来引用12px来定义字号或者其他属性 */
  6.         }
  8.         .panel {
  9.             /* 此时panel 是 1rem=0.75em=12px */
  10.             /* 如果不写 默认字号是1个rem  1rem */
  11.             font-size: 1rem;
  12.             /* 此时如果panel中的其他属性使用em单位时就是12px；
  13.             如果panel的font-size：2rem；那么 此时的em就是24px；
  14.             也就是说em是本元素的其他使用属性使用em计算的基本单位 
  15.             em会随着不同元素的设置而不同，rem始终等于html的font-size设置*/
  16.             padding: 1em;
  17.             border-radius: .5em;
  18.             /* 边框一定不要用em/rem,一定要用px */
  19.             border: 1px solid #999;
  20.             background-color: #eee;
  21.             margin: 2em;
  22.         }
  24.         .panel h2 {
  25.             /* 以后的字号，都要使用rem设置 */
  26.             font-size: 1.2rem;
  27.             /* 此时h2 字号就设置成了1.2rem=1.2*12px=14.4px
  28.             此时em=1.2rem=1.2*12px=14.4px */
  29.             margin: 1em;
  30.         }
  32.         .panel p {
  33.             font-size: 1.1rem;
  34.             text-indent: 2em;
  35.         }
  37.         /* 屏幕宽度 >= 800px ,字号放大14px */
  38.         @media screen and (min-width: 800px){
  39.             /* 14/16 = 0.875em */
  40.             html {
  41.                 font-size: 0.875em;
  43.             }
  45.             .panel {
  46.                 background-color: wheat;
  47.             }
  48.         }
  50.         /* 屏幕宽度 >= 1000px ,字号放大16px */
  51.         @media screen and (min-width: 1000px){
  52.             /* 16/16 = 1em */
  53.             html {
  54.                 font-size: 1em;
  56.             }
  58.             .panel {
  59.                 background-color: lightcyan;
  60.             }
  61.         }
  63.         /* 屏幕宽度 >= 1200px ,字号放大16px */
  64.         @media screen and (min-width: 1200px){
  65.             /* 20/16 = 1.25em */
  66.             html {
  67.                 font-size: 1.25em;
  69.             }
  71.             .panel {
  72.                 background-color: skyblue;
  73.             }
  74.         }
  75.         /* 扩展通过js动态增加时间控制字号大小 */
  76.         .panel.large {
  77.             font-size: 1.5rem;
  79.         }
  80.     </style>
  1. <script>
  2.     document.querySelector('button').addEventListener('click',(ev)=>{
  3.         const panel = document.querySelector('.panel');
  4.         panel.classList.toggle('large');
  5.         if (panel.classList.contains('larger')) ev.target.innerHTML='缩小';
  6.         else ev.target.innerHTML = '放大';
  7.     })
  8. </script>

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

视口单位：vw/vh

视口：浏览器用于显示文档的可视区域
不包括地址栏，菜单栏，工具栏，状态栏

  1. vh:视口的"初始包含块"的高度的百分之一（1/100）相对高度
  2. vw:视口的"初始包含块"的宽度的百分之一（1/100）相对宽度
  4. 初始包含块：目前可以简单的理解为"html"
  1. <div class="box"></div>
  1. .box{
  2.             width: 50vw;
  3.             height: 50vh;
  4.             background-color: lightgreen;
  5.             margin:auto;
  6.         }

怎么获得一个正方形的区块呢？

  1. .box{
  2.             /* 谁小以谁为标准 */
  3.             width: 80vmin;
  4.             height: 80vmin;
  5.             background-color: lightgreen;
  6.             margin:auto;
  7.         }
  9.         .box{
  10.             /* 谁大以谁为准 */
  11.             width: 80vmax;
  12.             height: 80vmax;
  13.             background-color: lightgreen;
  14.             margin:auto;
  15.         }

css原生变量

  1. <a href="">hello</a>
  1.         body {
  2.             /* 2015年以后支持变量 */
  3.             --color:#f00;
  4.             --hover-color:#0f0;
  5.             --a-border:1px solid;
  7.             /* css预处理器，用js来编译css代码，less,sass用考拉来做
  8.             功能也比css原生变量强 */
  9.         }
  10.         a{
  11.             /* color:#f00; */
  12.             color:var(--color);
  13.         }
  14.         a:hover{
  15.             /* color:#0f0;
  16.             border: 1px solid; */
  17.             color: var(--hover-color);
  18.             border: var(--a-border);
  19.         }
上一条：box-sizing属性-常用的元素居中方式下一条：box-sizing属性、 实例演示常用的元素居中方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多