search

博客列表 >em,rem原理与应用及视口单位(vh / vw / vmin / vmax)

em,rem原理与应用及视口单位(vh / vw / vmin / vmax)

豌豆君
豌豆君原创
2021年01月15日 10:46:24866浏览

em原理与应用代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em原理与应用</title>
  7.     <style>
  8.         /* 1.什么是em */
  9.         /* h2 {
  10.             font-size: 1.5em;
  11.         } */
  12.         /* 1.5em是用户代理（浏览器）为h2标签设置的默认字号 */
  13.         /* em: 浏览器文本的默认字号的相对关键字，通常是16px */
  14.         /* 1em = 16px */
  15.         /* 1.5em = 1.5 * 16px = 24px  */
  16.         /* --------------------------------------------- */
  17.         /* 2. em 用在哪? */
  18.         /* 2.1 设置响应式的文本字号 */
  19.         /* font-size: 是允许继承的 */
  20.         /* 当前h2的字号，继承自它的祖先元素(body,html) */
  21.         /* 想改变h2的字号，大小 */
  22.         html{
  23.             font-size: 20px;
  24.         }
  25.         /* h2 font-size: 1.5em  1.5em * 20px = 30px */
  26.         /* 2.2 设置盒模型的属性的响应式 */
  27.         div:first-of-type {
  28.             font-size: 1em;
  29.             /* width: 100px;
  30.             height: 100px; */
  31.             width: 5em;
  32.             height: 5em;
  33.             background-color: green;
  34.         }
  35.         /* 因为盒子的大小使用em，所以只需要设置盒子的font-size就可以动态的设置大小了 */
  36.         div:first-of-type {
  37.             font-size: 0.5em;
  38.         }
  39.         div:first-of-type {
  40.             font-size: 2em;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <h2>php.cn</h2>
  46.     <div></div>
  47. </html>

em制作一组响应的按钮组件代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em制作一组响应的按钮组件</title>
  7.     <style>
  8.         .btn {
  9.             background-color:skyblue;
  10.             color: #fff;
  11.             border: none;
  12.             outline: none;
  13.             padding: 0.5em 1em;
  14.             border-radius: 0.3em;
  15.         }
  16.         .btn:hover {
  17.             /* 透明度 */
  18.             opacity: 0.8;
  19.             /* 将鼠标设置为手型 */
  20.             cursor: pointer;
  21.             box-shadow: 0 0 3px #888;
  22.             transition: 0.3s;
  23.         }
  24.         /* 如果想设置三个不同的大小的按钮，只需要为这三个按钮指定不同的字号就可以 */
  25.         /* 较小的 */
  26.         .small {
  27.             /* font-size: 10px; */
  28.             font-size: 0.8em;
  29.         }
  30.         /* 正常的 */
  31.         .normal {
  32.             /* font-size: 16px; */
  33.             font-size: 1em;
  34.         }
  35.         /* 较大的 */
  36.         .larger {
  37.             /* font-size: 22px; */
  38.             font-size: 1.3em;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <buttton class="btn small">Button</buttton>
  44.     <buttton class="btn normal">Button</buttton>
  45.     <buttton class="btn larger">Button</buttton>
  46. </body>
  47. </html>

em定义字号代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em定义字号</title>
  7.     <style>
  8.         body {
  9.             /* font-size: 20px; */
  10.             /* 20px = 1.25 * 16px(1em) */
  11.             font-size: 1.25em;
  12.         }
  13.         /* h2 : 1.5em 30px */
  14.     </style>
  15. </head>
  16. <body>
  17.     <h2>php.cn</h2>
  18.     <!-- font-size 具有继承性，h2 font-size: 1.5em / 30px 所以span的font-size也是30px -->
  19.     <!-- 本意并不想让span内的文本与它的描述的对象的大小一样 -->
  21.     <h2>php.cn <span>php中文网</span></h2>
  22.     <!-- em: 有动态性和继承性优点，但是也有缺点 -->
  23.     <!-- 我们非常的需要一个固定值的em，它不应该随着它自身和祖先元素的字号大小而变动 -->
  24.     <!-- 用rem就可以解决掉，rem 就是一个固定值的em -->
  25. </body>
  26. </html>

rem定义字号代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>rem定义字号</title>
  7.     <style>
  8.         html {
  9.             /* em的初始值就是用户代理的值，默认就是16px */
  10.             /* 1em = 20px; */
  11.             font-size: 1.25em;
  12.             /* 此时 1em = 20px */
  13.             /* 当前font-size属性出现在了html中 */
  14.             /* html 叫根元素，一个页面中它是唯一的且是最大包含块 */
  15.             /* 所以，在html中定义的em大小，可看成一个常量(固定的值) */
  16.             /* html的所有后代元素，如果想引用html中的字号，就不能再用em了 */
  17.             /* 因为em具有继承性 */
  18.             /* 此时，我们用一个新的关键字来引用根元素中的字号大小font-size的值 */
  19.             /* 这个关键字就是: rem */
  20.         }
  21.         h2 {
  22.             /* 1.5rem = 1.5 * 20px = 30px */
  23.             font-size: 1.5rem;
  24.         }
  25.         h2 span {
  26.              /* 1rem = 1 * 20px = 20px; */
  27.             font-size: 1rem;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h2>php.cn <span>php中文网</span></h2>
  33. </body>
  34. </html>

em实现响应式布局代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em实现响应式布局</title>
  7.     <style>
  8.         /* 设置根元素字号 */
  9.         html {
  10.             /* font-size: 12px; */
  11.             font-size: 0.75em;
  12.             /* 后面就可以直接使用“rem”来引用“12px”来定义字号或其它属性 */
  13.         }
  14.         .panel {
  15.             /* font-size: 1rem; */
  16.             /* 此时，当前元素.panel中的其它属性，如果用到em就是1rem(12px) */
  17.             /* 1em = 12px */
  18.             padding: 1em;
  19.             /* 0.5em = 6px */
  20.             border-radius: .5em;
  21.             /* 边框不要用em/rem，一定要用px */
  22.             border: 1px solid #999;
  23.             background-color: #eee;
  24.             margin: 2em;
  25.         }
  26.         .panel h2 {
  27.             /* 以后的字号，强烈推荐使用rem设置 */
  28.             font-size: 1.2rem;
  29.             /* 1em = 1.2rem */
  30.             margin: 1em 0;
  31.         }
  32.         .panel p{
  33.             /* 1.1rem = 1.1 * 12px = 13.2px */
  34.             font-size: 1.1rem;
  35.             /* 缩进2个字符 */
  36.             text-indent: 2em;
  37.         }
  38.         /* 适配以小到大配置 */
  39.         /* 屏幕宽度 >= 800px, 字号放大到14px */
  40.         @media screen and (min-width: 800px) {
  41.             /* 14/16 = 0.875em             */
  42.             html {
  43.                 font-size: 0.875em;
  44.             }
  45.             .panel {
  46.                 background-color: wheat;
  47.             }
  48.         }
  49.         /* 屏幕宽度 >= 1000px, 字号放大到16px */
  50.         @media screen and (min-width: 1000px) {
  51.             /* 16/16 = 1em             */
  52.             html {
  53.                 font-size: 1em;
  54.             }
  55.             .panel {
  56.                 background-color: lightcyan;
  57.             }
  58.         }
  59.         /* 屏幕宽度 >= 1200px, 字号放大到20px */
  60.         @media screen and (min-width: 1200px) {
  61.             /* 20/16 = 1.25em             */
  62.             html {
  63.                 font-size: 1.25em;
  64.             }
  65.             .panel {
  66.                 background-color: lightskyblue;
  67.             }
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.     <div class="panel">
  73.         <h2>除了“嫦娥”，还有谁带回太空“土特产”</h2>
  74.         <div class="panel-body">
  75.             <p>
  76.                 1969年7月20日，NASA阿波罗11号登月舱带着2名宇航员——尼尔·阿姆斯特朗和巴兹·奥尔德林，成功踏上月球正面的静海基地。
  77.             </p>
  78.         </div>
  79.     </div>
  80. </body>
  81. </html>

em实现响应式布局: 动态调整响应级别代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em实现响应式布局: 动态调整响应级别</title>
  7.     <style>
  8.         /* 设置根元素字号 */
  9.         html {
  10.             /* font-size: 12px; */
  11.             font-size: 0.75em;
  12.             /* 后面就可以直接使用“rem”来引用“12px”来定义字号或其它属性 */
  13.         }
  14.         .panel {
  15.             /* font-size: 1rem; */
  16.             /* 此时，当前元素.panel中的其它属性，如果用到em就是1rem(12px) */
  17.             /* 1em = 12px */
  18.             padding: 1em;
  19.             /* 0.5em = 6px */
  20.             border-radius: .5em;
  21.             /* 边框不要用em/rem，一定要用px */
  22.             border: 1px solid #999;
  23.             background-color: #eee;
  24.             margin: 2em;
  25.         }
  26.         .panel h2 {
  27.             /* 以后的字号，强烈推荐使用rem设置 */
  28.             font-size: 1.2rem;
  29.             /* 1em = 1.2rem */
  30.             margin: 1em 0;
  31.         }
  32.         .panel p{
  33.             /* 1.1rem = 1.1 * 12px = 13.2px */
  34.             font-size: 1.1rem;
  35.             /* 缩进2个字符 */
  36.             text-indent: 2em;
  37.         }
  38.         /* 适配以小到大配置 */
  39.         /* 屏幕宽度 >= 800px, 字号放大到14px */
  40.         @media screen and (min-width: 800px) {
  41.             /* 14/16 = 0.875em             */
  42.             html {
  43.                 font-size: 0.875em;
  44.             }
  45.             .panel {
  46.                 background-color: wheat;
  47.             }
  48.         }
  49.         /* 屏幕宽度 >= 1000px, 字号放大到16px */
  50.         @media screen and (min-width: 1000px) {
  51.             /* 16/16 = 1em             */
  52.             html {
  53.                 font-size: 1em;
  54.             }
  55.             .panel {
  56.                 background-color: lightcyan;
  57.             }
  58.         }
  59.         /* 屏幕宽度 >= 1200px, 字号放大到20px */
  60.         @media screen and (min-width: 1200px) {
  61.             /* 20/16 = 1.25em             */
  62.             html {
  63.                 font-size: 1.25em;
  64.             }
  65.             .panel {
  66.                 background-color: lightskyblue;
  67.             }
  68.         }
  69.         .panel.large{
  70.             font-size: 2rem;
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <button>缩小</button>
  76.     <div class="panel large">
  77.         <h2>除了“嫦娥”，还有谁带回太空“土特产”</h2>
  78.         <div class="panel-body">
  79.             <p>
  80.                 1969年7月20日，NASA阿波罗11号登月舱带着2名宇航员——尼尔·阿姆斯特朗和巴兹·奥尔德林，成功踏上月球正面的静海基地。
  81.             </p>
  82.         </div>
  83.     </div>
  84. </body>
  85. </html>
  86. <script>
  87.     document.querySelector('button').addEventListener('click',(ev) =>{
  88.         const panel = document.querySelector('.panel');
  89.         panel.classList.toggle('large');
  90.         if(panel.classList.contains('large')) ev.target.innerHTML = '缩小';
  91.         else ev.target.innerHTML = '放大';
  92.     })
  93. </script>

视口单位：vh / vw 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>视口单位：vh / vw </title>
  7.     <style>
  8.         /* 视口：“可视窗口”，浏览器窗口中用于显示文档的可视区域 */
  9.         /* 视口不包括地址栏，菜单栏，工具条，状态栏 */
  10.         /* vh: 视口的“初始包含块”的高度的百分之一（1/100）
  11.         vw: 视口的“初始包含块”的宽度的百分之一（1/100）
  12.         初始包含块：目前 可以简单的理解为“html” */
  13.         .box {
  14.             width: 50vw;
  15.             height: 25vh;
  16.             background-color: lightgreen;
  17.             margin: auto;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box"></div>
  23. </body>
  24. </html>

视口单位：vmin / vmax代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>视口单位：vmin / vmax </title>
  7.     <style>
  8.         /* .box {
  9.             width: 50vw;
  10.             height: 25vh;
  11.             background-color: lightgreen;
  12.             margin: auto;
  13.         } */
  14.         .box {
  15.             width: 50vmin;
  16.             height: 50vmin;
  17.             background-color: lightgreen;
  18.             margin: auto;
  19.         }
  20.         /* 用在手机横竖屏适配（但是一些老系统不支持） */
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box"></div>
  25. </body>
  26. </html>

css原生变量 / css自定义属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css原生变量 / css自定义属性</title>
  7.     <style>
  8.         body {
  9.             --color: #f00;
  10.             --active-color: #0f0;
  11.             --a--border:1px solid;
  12.         }
  13.         a {
  14.             color: var(--color);
  15.         }
  16.         a:hover {
  17.             color: var(--active-color);
  18.             border: var(--a--border);
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <a href="">php.cn</a>
  24. </body>
  25. </html>

总结：

em:

文本字号单位（也叫元素符号）,浏览器文本的默认字号的相对关键字，根元素html中font-size单位通常是1em=16px（可以修改1em为其它px）,em具有继承性（子元素em是以父元素font-size为单位大小）。主要是设置动态的尺寸

rem:

根元素html中font-size单位,rem不具有继承性，主要是设置固定的字号。
视口：“可视窗口”，浏览器窗口中用于显示文档的可视区域，视口不包括地址栏，菜单栏，工具条，状态栏

@media screen：

为屏幕适配，适配以小到大配置。

vh：

视口的高度的百分之一（1/100）

vw:

视口的宽度的百分之一（1/100）

vmin：

视口的最小的边的百分之一

vmax：

视口的最大的边的百分之一

vmin和vmax：

用在手机横竖屏适配（但是一些老系统不支持）

css原生变量 / css自定义属性：

变量名称必须以 — 开头，变量只能存储一个属性的值，而不能用来存储一个属性，变量中无法使用加减等数学方法，如果需要使用计算，则可以使用 calc 函数，CSS变量是区分大小写的，通过var()函数来引用。

上一条：WordPress小程序之酱茄Free小程序开源版更新敏感词检测功能下一条：第7章 1217-细说em/rem/vh/vw与响应式布局，学习心得、笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多