在没风的地方找太阳  在你冷的地方做暖阳 人事纷纷  你总太天真  往后的余生  我只要你 往后余生  风雪是你  平淡是你  清贫也是你 荣华是你  心底温柔是你  目光所致  也是你 想带你去看晴空万里  想大声告诉你我为你着迷 往事匆匆  你总会被感动  往后的余生  我只要你 往后余生  冬雪是你  春花是你  夏雨也是你 秋黄是你  四季冷暖是你  目光所致  也是你 往后余生  风雪是你  平淡是你  清贫也是你 荣华是你  心底温柔是你  目光所致  也是你
jQuery火箭图标返回顶部代码 - 站长素材

前端设置宽高时height： 100% 和 100vh 的区别

1.em

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5

但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。

2.rem

这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

参照后面给的demo

3.vh

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

 

复制代码
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<title>恭贺新春</title>
</head>
<style type="text/css" media="screen">
html{
font-size: 14px;
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
font-size: 1.2rem;
}
.rem-box {
background: #d60b3b;
width:10rem;
height: 10rem;
color: #fff;
text-align: center;
line-height:5rem;
}
.vhvw-box {
background: #d60b3b;
width:50vw;
height: 50vh;
color: #fff;
text-align: center;
line-height:25vh;
}
</style>
<body>
<h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
<div class="em">
<br>字体大小 1.2 * 14（父元素body） = 16px</br>
<div class="em-son">
<br>字体大小 1.2 * 16(父元素em) = 20px</br>
<div class="em-grandson">
<br>字体大小 1.2 * 20(父元素em-son) = 24px</br>
</div>
</div>
</div>
<br>
<h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
<div class="rem">
<br>字体大小 1.2 * 14（根节点html） = 16px</br>
<div class="rem-son">
<br>字体大小 1.2 * 14（根节点html） = 16px</br>
<div class="rem-grandson">
<br>字体大小 1.2 * 14（根节点html） = 16px</br>
</div>
</div>
</div>
<br>
<h1>rem 也可作为固定长度单位设置宽高等</h1>
<div class="rem-box">
宽：14 * 10 = 140px<br>
高：14 * 10 = 140px
</div>
<br>
<h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
<div class="vhvw-box">
<br>宽：屏幕宽度的50%</br>
<br>高：屏幕高度的50%</br>
</div>
</body>
</html>
复制代码
posted @   艺术诗人  阅读(12671)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
❄
❄
❄
❄