实例演示,em,rem,px的应用场景,并指出em,rem的区别与联系
<!DOCTYPE html><html lang=""><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> :root{ font-size: 0.625em; } /* 浏览器默认样式中，1em=16px; */ /* 0.625em=0.625*16=10px; */ /* 这里把根元素的字体设置为10px; */ .box-1{ font-size: 1.4rem; /* rem是根据根元素的字体大小进行设置的 */ /* 1.4rem=1.4*10px=14px */ /* rem一般用于字体大小设置 */ background-color: bisque; border: 5px skyblue solid; /* px一般用于边框设置 */ padding: 2em; /* padding中的em跟着当前元素的字体大小来变化 */ /* 2em=2*14px=28px */ border-radius: 5em; /* 5em=5*14px=70px */ margin: 5em; /* 5em=5*14px=70px */ /* em一般用于设置padding，margin，border-radius */ } /* em与rem的区别与联系？ em可以设置字体大小，是根据父级元素的大小变化的，但是受到嵌套的影响，存在一定问题。 em还可以设置padding，margin，根据当前元素的字体大小进行变化。 rem是专门设置字体大小的。 rem跟着跟元素的字体大小进行变化。 */ </style></head><body> <div class="box-1"> <h1>10月23日：未来三天全国天气预报</h1> <p> 1. 关注台风“沙德尔”未来路径和发展动态，及对华南沿海、我国南海海域风雨影响；</p> <p> 2. 23日夜间至24日冷空气将影响新疆北部，关注雨雪和大风降温天气对农牧业及交通等的不利影响；</p> <p>3. 云南西北部近期多降雨天气，关注可能引发的次生灾害。</p> </div> </body></html>
使用vh,vw写一个三行单列的手机首页布局,色块即可不需要具体内容
<!DOCTYPE html><html lang=""><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box-1{ width: 30vw; height: 20vh; background-color: tan; margin: 1em; } .box-2{ width: 50vw; height: 30vh; background-color:navajowhite; margin: 1em; } .box-3{ width: 50vw; height: 10vh; background-color: khaki; margin: 1em; } /* vw=view width 视口的1%宽度 vh=view height 视口的1%高度 */ </style></head><body> <div class="box-1"> box1 </div> <div class="box-2"> box2 </div> <div class="box-3"> box3 </div></body></html>
