本文详细介绍了CSS中em, rem, vw和vh单位的含义和使用方法。em单位用于表示相对父元素字体大小，rem表示相对于根元素字体大小，而vw和vh则是视口宽度和高度的百分比单位。通过实例解释了这些单位如何影响元素尺寸，并探讨了它们在响应式设计中的应用，特别是在动态调整元素大小和视口适配方面的作用。最后提到了vw和vh单位在实现动态响应布局中的重要性，为后续的响应式布局开发奠定了基础。
em
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
比如父元素font-size:12px;
自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;
但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；
rem
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；
如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；
vm/vh
vw ： 视口宽度的 1/100；vh ：视口高度的 1/100
根据视口的宽高进行相对大小计算结果
vw
viewport width
1vw = 1/100 视口宽度
vh
viewport height
1vh = 1/100 视口高度
01、确定设计稿对应的vw尺寸（1/100视口宽度）
02、vw单位的尺寸 = px实际像素数值 / (1/100视口宽度)
01、确定设计稿对应的vh尺寸（1/100视口高度）
02、vh单位的尺寸 = px实际像素数值 / (1/100视口高度)
给根元素设置随着饰扣变化而变化的vw单位，实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
这次我们给大家介绍了vw,vh的适配，下次我们给大家介绍响应式布局的开发（bootstrap）。
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
