Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 《em/rem/vh/vw与响应式布局》20201217
Blogger Information
Blog 26
fans 1
comment 1
visits 19664
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与响应式布局》20201217
杨凡的博客
Original
582 people have browsed it

em,rem的原理

em与rem

  1. 浏览器文本的默认字号，通常是16px
  2. 一般可以用作设置响应式的文本字号
  3. 设置盒模型响应式属性
  4. rem是固定值的em
  5. 边框不能用em或者rem，要用px
  6. rem取的html字号；em取得父级字号
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.         .btn{
  9.             /* 背景颜色 */
  10.             background-color: #ff6801;
  11.             /* 字体颜色 */
  12.             color: #fff;
  13.             /* 去掉边框 */
  14.             border:none;
  15.             /* 去掉单机轮廓线 */
  16.             outline: none;
  17.             /* 内边距 */
  18.             padding: 0.5em 1em;
  19.             border-radius: 0.3em;
  20.         }
  21.         /* 鼠标移上悬停效果 */
  22.         .btn:hover{
  23.             /* 透明度 */
  24.             opacity: 0.8;
  25.             /* 将鼠标设置为手型 */
  26.             cursor: pointer;
  27.             /* 阴影效果 */
  28.             box-shadow: 0 0 3px #888;
  29.             /* 阴影效果延时 */
  30.             transition: 0.3s;
  31.         }
  32.         .small{
  33.             font-size: 10px;
  34.         }
  35.         .normal{
  36.             font-size: 16px;
  37.         }
  38.         .larger{
  39.             font-size: 22px;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <button class="btn larger">Button</button>
  45.     <button class="btn normal">Button</button>
  46.     <button class="btn small">Button</button>
  47. </body>
  48. </html>

rem应用
  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>rem定义</title>
  7.     <style>
  8.         html{
  9.             font-size: 1.25em;
  10.         }
  11.         h2{
  12.             font-size: 1.5rem;
  13.         }
  14.         h2 span{
  15.             font-size: 1rem;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <h2>PHP中文网<span>php.cn</span></h2>
  21. </body>
  22. </html>

rem/em/vh/vw的区别与联系

vh与vw

  1. 视口单位，视口，浏览器的可视区域，但不包括地址栏、菜单栏、工具栏、状态栏
  2. vh视口的初始包含快的高度的百分之一
  3. vw视口的初始包含快的宽度的百分之一
  4. 移动端布局使用最多
  5. vmin/vmax 可视口最小/最大
  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>视口单位: vmin, vmax</title>
  7.     <style>
  8.         .box {
  9.             width: 80vmin;
  10.             height: 80vmin;
  11.             background-color: lightgreen;
  12.             margin: auto;
  13.         }
  15.         /* .box {
  16.             width: 80vmax;
  17.             height: 80vmax;
  18.             background-color: lightgreen;
  19.             margin: auto;
  20.         } */
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box"></div>
  25. </body>
  26. </html>

总结：em,rem,vh,vw都是相对大小，不是绝对大小，em是相对于父元素的字体大小，rem是相对于根元素(html)的字体大小，vh是相对于视口高度的百分比,vw是相对于视口的宽度百分比，可以使用vmax,vmin限定元素的指定大小。

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