Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > em,rem,px的应用场景和vw,vh的应用
Blogger Information
Blog 11
fans 0
comment 0
visits 8306
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,px的应用场景和vw,vh的应用
YwQ
Original
855 people have browsed it
实例演示,em,rem,px的应用场景,并指出em,rem的区别与联系
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         :root{
  9.             font-size: 0.625em;
  10.         }
  11.         /* 浏览器默认样式中，1em=16px; */
  12.         /* 0.625em=0.625*16=10px; */
  13.         /* 这里把根元素的字体设置为10px; */
  14.         .box-1{
  15.             font-size: 1.4rem;
  16.             /* rem是根据根元素的字体大小进行设置的 */
  17.             /* 1.4rem=1.4*10px=14px */
  18.             /* rem一般用于字体大小设置 */
  19.             background-color: bisque;
  20.             border: 5px skyblue solid;
  21.             /* px一般用于边框设置 */
  22.             padding: 2em;
  23.             /* padding中的em跟着当前元素的字体大小来变化 */
  24.             /* 2em=2*14px=28px */
  25.             border-radius: 5em;
  26.             /* 5em=5*14px=70px */
  27.             margin: 5em;
  28.             /* 5em=5*14px=70px */
  29.             /* em一般用于设置padding，margin，border-radius */
  30.         }
  31.         /* 
  32.         em与rem的区别与联系？
  33.         em可以设置字体大小，是根据父级元素的大小变化的，但是受到嵌套的影响，存在一定问题。
  34.         em还可以设置padding，margin，根据当前元素的字体大小进行变化。
  35.         rem是专门设置字体大小的。
  36.         rem跟着跟元素的字体大小进行变化。
  37.          */
  39.     </style>
  40. </head>
  41. <body>
  42.    <div class="box-1">
  43.         <h1>10月23日：未来三天全国天气预报</h1>
  45.         <p> 1. 关注台风“沙德尔”未来路径和发展动态，及对华南沿海、我国南海海域风雨影响；</p>
  47.         <p> 2. 23日夜间至24日冷空气将影响新疆北部，关注雨雪和大风降温天气对农牧业及交通等的不利影响；</p>
  49.         <p>3. 云南西北部近期多降雨天气，关注可能引发的次生灾害。</p>
  50.    </div> 
  51. </body>
  52. </html>
使用vh,vw写一个三行单列的手机首页布局,色块即可不需要具体内容
  2. <!DOCTYPE html>
  3. <html lang="">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box-1{
  10.             width: 30vw;
  11.             height: 20vh;
  12.             background-color: tan;
  13.             margin: 1em;
  14.         }
  15.         .box-2{
  16.             width: 50vw;
  17.             height: 30vh;
  18.             background-color:navajowhite;
  19.             margin: 1em;
  20.         }
  21.         .box-3{
  22.             width: 50vw;
  23.             height: 10vh;
  24.             background-color: khaki;
  25.             margin: 1em;
  26.         }
  27.         /* 
  28.         vw=view width 视口的1%宽度
  29.         vh=view height 视口的1%高度
  30.         */
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="box-1">
  35.         box1
  36.     </div>
  37.     <div class="box-2">
  38.         box2
  39.     </div>
  40.     <div class="box-3">
  41.         box3
  42.     </div>
  43. </body>
  44. </html>
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