收藏
天蓬老师批改状态：合格
老师批语：
1.em：em通常用于依赖字号的元素属性上，比如margin、padding、width、height等元素；
2.rem：root em的缩写，通常用于font-size字号的设置上；
3.px：通常用于边框宽度border的设置上
4.em是根据它的父级来改变大小而rem只会随着root根元素的大小来改变
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>em,rem的原理与应用场景</title><style>:root {font-size: 0.7em;}.news {background-color: #ccc;border: #000 solid 1px;padding: 1em;margin: 1em;}.news h2 {font-size: 3rem;}.news1 {font-size: 1.25rem;text-indent: 2em;}</style></head><body><div class="news"><h2>1217作业</h2><div class="news1"><p>按自己理解的方式详细描述em,rem的原理与应用场景 ，并实例演示 2. 分析 rem / em /vh/ vw的区别与联系</p></div></div></body></html>
1、vw：表示视口的宽度，1vw就表示当前视口宽度的百分之一；
2、vh：表示视口的高度，1vh就表示当前视口高度的百分之一；
3、vmin：表示在vw与vh中取最小值；
4、vmax：表示在vw与vh中取最大值
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vh/vw</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box1 {background-color: blue;width: 50vw;height: 25vh;}.box2 {background-color: coral;width: 50vw;height: 25vh;}.box3 {background-color: blanchedalmond;width: 50vw;height: 25vh;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
