描述em/rem的原理应用场景和演示
- em是继承与父级和本身的font-size值,会跟随font-size值的设置一直改变,不好控制,可用于来设置响应式布局和需要跟随大小变化而变化的值的单位
- rem是根据与根属性(html)的font-size的值,要是没有设置的话会根据根属性继承浏览器的值,一般是16px,来设置,主要用于文字、标题和需要能把握固定尺寸的值的单位
<style>
<style>
h2:nth-of-type(1){
font-size:1.2em;
此时字体的默认值为16px,第一行为1.2倍的em,就是1.2x16=19.2px
}
h2:nth-of-type(2){
此时字体的默认值为16px,第一行为1.2倍的em,就是1.3x16=20.8px
font-size:1.3em;
}
span{
因为他是第二个h2的子元素,所以继承父级的字号为20.8px,它本身字号得20.8x0.8=16.64px
font-size:0.8em;
在这个属性上面设置过字号了,所以它继承了等于16.64px
width:1em;
}
</style>
<body>
<h2>你好中文网</h2>
<h2>你好<span>中文网</span></h2>
</body>
<style>
html {
font-size: 20px;
}
.panel h2{
给标题设置为1.3倍的字体,就是20x1.3=26px
font-size: 1.3rem;
}
.panel-body{
给文字设置为0.8倍的字体,就是20x0.8=16px
font-size: 0.8rem;
首行缩进2个字,就是2x16=32
text-indent: 2em;
}
</style>
<html>
<body>
<div class="panel">
<h2>嫦娥五号成功返回地球后,世界各国态度大不同</h2>
<div class="panel-body">
<p>综合外媒报道,中国“嫦娥五号”返回器携带月球表面土石样本于当地时间星期四12月17日凌晨,成功在内蒙古四子王旗预定区域安全着陆。而上一次人类将月球样本带回地球还是40多年前,中国也成为全球第三个实现月球采样返回能力的国家。世界各个航天大国对此反应不一,有的点赞祝贺,有的毫无表示,还有的阴阳怪气。
</p>
</div>
</div>
</body>
</html>
vh和vw,vmia,vmax
vh和vw就是根据屏幕来写的百分比,vmia就是最小不能小于屏幕的多少百分比,vmax就是最大不能大于屏幕的多少百分比
<style>
.b {
width: 50vw;
height: 50vh;
background-color: blue;
}
</style>
<body>
<div class="b"></div>
</body>
块级元素会根据你屏幕的大小来占据你50%的高和50%宽
<style>
.b {
width: 50vmax;
height: 50vmax;
background-color: blue;
}
</style>
<body>
<div class="b"></div>
</body>
因为这个是占据屏幕最长边的百分比,所以会选择最长的边,然后来占据其百分之50的地方
<style>
.b {
width: 50vmax;
height: 50vmax;
background-color: blue;
}
</style>
<body>
<div class="b"></div>
</body>
因为这个是占据屏幕最短边的百分比,所以会选择最短的边,然后来占据其百分之50的地方
分析 rem / em /vh/ vw的区别与联系
vh和vw适合适用在改变页面大小里面的块的尺寸,可以设置其来适应窗口的大小,rem和em可以适用于在改变页面大小里面的块的字体的尺寸,两者结合可以设计出智适应网页