考核内容:web在不同设备下的度量使用
题发散度: ★★
试题难度: ★★
解题思路:
在做上面的题目时要注意
1rem、1em、1vh、1px各自代表的含义?
元素的width/height/padding/margin用em的话是相对于该元素的font-size
<div> boxoutside 0 </div>
<div class="box">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
</div>
<style>
html{font-size: 50px}
.box{font-size: 12px}
.box1{font-size: 1em}
.box2{font-size: 2em}
.box3{font-size: 3em}
</style>
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于 屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的 话 vh 单位更好。
<div class="box">
<img src="pic.jpg" alt="100*80">
<img src="pic.jpg" class="s1" alt="100*80">
<img src="pic.jpg" class="s2" alt="100*80">
<img src="pic.jpg" class="s3" alt="100*80">
</div>
<style>
*{margin: 0;padding: 0}
.box{width: 300px;height: 300px;background: pink}
.s1{height: 10vw}
.s2{width: 10vh}
.s3{width: 60vw;height: 50vh}
</style>
要注意的是
rpx单位是微信小程序中css的尺寸单位,
rpx可以根据屏幕宽度进行自适应。
答案:
B. em子元素字体大小的em是相对于根元素HTML字体大小
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有