收藏
天蓬老师批改状态：合格
老师批语：总结的非常棒
em只继承父级元素1em=16pxem是用于设定font-size,padding,margin,border-radius等元素em在嵌套时，<1em时会逐级变小，>1em时会逐级变大em,因为如果用em,会根据字体大小变化，效果会很难看案例
<style>:root {font-size: 0.75em;}body {background-color: aquamarine;}@media screen and (min-width: 500px) {body {background-color: red;font-size: 2em;}}@media screen and (min-width: 800px) {body {background-color:yellow;font-size: 3em;}}</style></head><body><p>当屏幕宽度大于500px时，屏幕变红,字体变为2em；当屏幕宽度大于800px时，屏幕变黄，字体变为3em</p></body>
图样
rem是root em的缩写，一般用于设定字号rem继承的是根元素root的值进行计算rem一般用于font-size中用于设置字号，但尽可能不用在：root上案例
<style>:root {font-size: 0.75em;}ul {font-size: 1.1em;}/*当设置为rem时，font-size继承的是根目录的值,因此，他就不会逐级变大*/ul {font-size: 2rem;}</style></head><body><ul><li>在这里学习中<ul><li>为了学习<ul><li>努力学习<ul><li>不要放弃</li></ul></li></ul></li></ul></li></ul></body>
border: 1px solid redvh单位是视口高度的1/100vw单位是视口宽度的1/100vmin选择视口宽高较小的值进行适配vmax选择视口宽高较大的值进行适配案例
<style>/* vh单位是视口高度的1/100vw单位是视口宽度的1/100 */.box {width: 60vw;height: 30vh;background-color: teal;margin: auto;margin-bottom;:1em}.box1 {width: 60vw;height: 40vh;background-color: tomato;margin: auto;margin-top: 1em;}/* 设置一个正方形的容器,确保在横屏和竖屏都能完美的显示成一个正方形.`vmin`选择视口宽高较小的值进行适配,- `vmax`选择视口宽高较大的值进行适配 */.box2 {width: 60vmax;height: 60vmax;background-color:violet;margin: auto;margin-top: 1em;}</style></head><body><div class="box">第一个布局</div><div class="box1">第二个布局</div><div class="box2">第三个布局</div></body>
图样
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
