移动端rem,vw,vh,百分比布局

PC端的px布局一般都会写死固定宽高或者用min-width,max-width这种方式去做不同屏幕分辨率适配,而移动端的布局要复杂的多。不同手机的宽高比例和屏幕尺寸都不太一样,所以需要各种布局方式去适配

1.首先说rem布局,rem单位属于一个相对单位,也就是相对于根元素的HTML里的font-size,一般来说根元素的font-size浏览器默认都为16px,也就是说,这个时候你在利用rem布局的时候,你的1rem则是16px

这样的话导致在设计元素尺寸的时候非常不好计算,那么我们就可以在HTML的初始css时设置一个根元素font-size,但是有些浏览器,比如谷歌,默认字体大小不得小于12px,而且在移动端的浏览器进行浏览时

用户为了个人习惯有的时候也会设置浏览器的字体大小,所以说在HTML中设置的根元素font-size更多是为了开发者便于计算页面元素尺寸,为了维持浏览器默认大小,在body里,一样要设置回font-size为16px

这样你在进行该网页编辑的时候就不会影响到浏览器的默认字体

2.vw,vh,百分比布局,vh,和vw是两个相对单位,视窗的宽度的百分之一就是1vw,vh同理,这个时候可能会产生疑惑,那么vh和vw不就和百分比是一样的,并不是,百分比的话是相对于当前元素的父元素的百分比

而vh和vw一直是相对于当前视窗的一个单位长度,那么视窗是什么呢,从设备来开始,到移动端显示的区域,基本可以分为,设备屏幕视窗,浏览器视窗,和当前网页视窗,而vw和vh相对的是当前网页的视窗宽

度高度。

猜你喜欢

转载自www.cnblogs.com/hurenjie/p/11547864.html