Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em,rem的原理与应用场景 、vh与vw
Blogger Information
Blog 29
fans 0
comment 0
visits 19798
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
em,rem的原理与应用场景 、vh与vw
手机用户1576673622
Original
882 people have browsed it

em、rem原理与应用场景

  1. em、rem是什么？
    • em：浏览器文本的默认字号的相对关键字，通常是16px。em具有动态性和继承性，这是优点。但有时我们非常的需要一个固定值的em,它不应该随着它自身和祖先元素的字号大小而变动，就是rem。
    • rem是一个固定的值，和html中的font-size关联，不受其他影响。非常适合用在font-size中。
  2. em应用场景？
    • 响应式布局的文本字号。 动态设置文本字号，放大或缩小，不用一个个修改，方便。
    • 设置盒模型的属性的响应式 动态调整盒子的大小，只需要调整font-size就行。

  • em的使用，响应式按钮

    1. <!DOCTYPE html>
    2. <html lang="en">
    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.       .btn {
    10.           /* 背景颜色 */
    11.           background-color: #1e9fff;
    12.           /* 字体颜色 */
    13.           color: #fff;
    14.           /* 边框 */
    15.           border: none;
    16.           /* 轮廓线 */
    17.           outline: none;
    18.           /* 内边距 */
    19.           padding: 0.5em 1em;
    20.           /* 圆角 */
    21.           border-radius: 0.5em;
    22.       }
    24.       /* 鼠标悬停样式 */
    25.       .btn:hover {
    26.           /* 透明度 */
    27.           opacity: 0.5;
    28.           /* 手型 */
    29.           cursor: pointer;
    30.           /* 外发光 */
    31.           box-shadow: 0 0 9px #222;
    32.           /* 延时 */
    33.           transition: 0.5s;
    34.       }
    35.       .small {
    36.           font-size: 8px;
    37.       }
    39.       /* 正常的 */
    40.       .normal {
    41.           font-size: 16px;
    42.       }
    44.       /* 较大的 */
    45.       .larger {
    46.           font-size: 24px;
    47.       }
    49.   </style>
    50. </head>
    51. <body>
    52.   <button class="btn small">按钮</button>
    53.   <button class="btn normal">按钮</button>
    54.   <button class="btn larger">按钮</button>
    55. </body>
    56. </html>

  • em的使用。定义字号

    1.   <style>
    2.       html {
    3.           font-size: 1.25em;
    4.       }
    6.       h2 {
    7.           font-size: 1.5rem;
    8.       }
    10.       h2 span {
    11.           font-size: 2rem;
    12.       }
    13.   </style>

  • em的使用。实现响应式布局

    1. <!DOCTYPE html>
    2. <html lang="en">
    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>em响应式布局</title>
    8.   <style>
    9.       html {
    10.           /* font-size = 20px */
    11.           font-size: 1.25em;
    12.       }
    14.       .panel {
    15.           font-size: 1.5rem;
    16.           margin: 1em 0;
    17.       }
    19.       .panel p {
    20.           font-size: 1rem;
    21.           text-indent: 2em;
    22.           line-height: 2;
    23.       }
    25.       @media screen and (min-width: 800px) {
    26.           /* 16 */
    27.           html {
    28.               font-size: 1em
    29.           }
    31.           .panel {
    32.               background-color: rgb(203, 241, 29);
    33.           }
    34.       }
    36.       @media screen and (min-width: 1200px) {
    37.           /* 20 */
    38.           html {
    39.               font-size: 1.25em
    40.           }
    42.           .panel {
    43.               background-color: rgb(23, 201, 103);
    44.           }
    45.       }
    47.       @media screen and (min-width: 1500px) {
    48.           /* 24 */
    49.           html{
    50.               font-size: 1.5em
    51.           }
    53.           .panel {
    54.               background-color: rgb(180, 18, 18);
    55.           }
    56.       }
    57.   </style>
    58. </head>
    59. <body>
    60.   <div class="panel">
    61.       <h1>冻到开裂！全国冻哭预警地图出炉 10省区小心冻伤</h1>
    62.       <div class="panel-body">
    63.           <p>小寒小寒冻成一团，没有最冷只有更冷。中国天气网推出2021年首个全国冻哭预警地图，提醒小伙伴们今明（1月6日至7日）天，是此次寒潮过程最冷时段，全国各地寒冷升级，10省区需小心冻伤。</p>
    64.       </div>
    65.   </div>
    66. </body>
    67. </html>

    可视窗口单位：vh、vw

  • “可视窗口”,浏览器窗口中用于显示文档的可视区域。（视口不包括地址栏,菜单栏,工具条,状态栏）
  • vh: 视口的”初始包含块”的高度的百分之一(1/100)
  • vw: 视口的”初始包含块”的宽度的百分之一(1/100)
    初始包含块: 目前 可以简单的理解为”html”
  • vmin：使用视窗宽与高中的最小的那个。 vmax：使用视窗宽与高中的最大的那个。
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