前端学习之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）。