Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 响应式布局em/rem/vh/vw的理解
Blogger Information
Blog 9
fans 0
comment 1
visits 7869
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的理解
东东
Original
1181 people have browsed it

响应式布局em和#### em的定义

  1. em只继承父级元素
  2. 1em=16px
  3. em是用于设定font-size,padding,margin,border-radius等元素
  4. em在嵌套时，<1em时会逐级变小，>1em时会逐级变大
  5. 边框不要用em,因为如果用em,会根据字体大小变化，效果会很难看

案例

  1.     <style>
  2.         :root {
  3.             font-size: 0.75em;
  4.         }
  5.         body {
  6.             background-color: aquamarine;
  7.         }
  8.         @media screen and (min-width: 500px) {
  9.         body {
  10.             background-color: red;
  11.             font-size: 2em;
  12.         }
  13.         }
  14.         @media screen and (min-width: 800px) {
  15.         body {
  16.             background-color:yellow;
  17.             font-size: 3em;
  18.         }
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <p>当屏幕宽度大于500px时，屏幕变红,字体变为2em；当屏幕宽度大于800px时，屏幕变黄，字体变为3em</p>
  24. </body>

图样

rem的定义

  1. rem是root em的缩写，一般用于设定字号
  2. rem继承的是根元素root的值进行计算
  3. rem一般用于font-size中用于设置字号，但尽可能不用在：root上

案例

  1.     <style>
  2.         :root {
  3.             font-size: 0.75em;
  4.         }
  5.         ul {
  6.             font-size: 1.1em;
  7.         }
  8.         /*当设置为rem时，font-size继承的是根目录的值,因此，他就不会逐级变大*/
  9.         ul {
  10.             font-size: 2rem;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>
  17.             在这里学习中
  18.             <ul>
  19.                 <li>
  20.                     为了学习
  21.                     <ul>
  22.                         <li>
  23.                             努力学习
  24.                             <ul>
  25.                                 <li>
  26.                                     不要放弃
  27.                                 </li>
  28.                             </ul>
  29.                         </li>
  30.                     </ul>
  31.                 </li>
  32.             </ul>
  33.         </li>
  34.     </ul>
  35. </body>

px

  • 边框类不需要根据自适元素，要用绝对值px,如：border: 1px solid red

视口：vh和vw

  • vh单位是视口高度的1/100
  • vw单位是视口宽度的1/100
  • vmin选择视口宽高较小的值进行适配
  • vmax选择视口宽高较大的值进行适配

案例

  1.     <style>
  2.         /* vh单位是视口高度的1/100
  3.         vw单位是视口宽度的1/100 */
  4.         .box {
  5.             width: 60vw;
  6.             height: 30vh;
  7.             background-color: teal;
  8.             margin: auto;
  9.             margin-bottom;:1em
  10.         }
  11.         .box1 {
  12.             width: 60vw;
  13.             height: 40vh;
  14.             background-color: tomato;
  15.             margin: auto;
  16.             margin-top: 1em;            
  17.         }
  18.         /* 设置一个正方形的容器,确保在横屏和竖屏都能完美的显示成一个正方形.`vmin`选择视口宽高较小的值进行适配,- `vmax`选择视口宽高较大的值进行适配 */
  19.         .box2 {
  20.             width: 60vmax;
  21.             height: 60vmax;
  22.             background-color:violet;
  23.             margin: auto; 
  24.             margin-top: 1em;
  25.             }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="box">第一个布局</div>
  30.     <div class="box1">第二个布局</div>
  31.     <div class="box2">第三个布局</div>
  32. </body>

图样

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