rem布局
用js获取视窗宽度,然后设置html的font-size为视窗宽度的十分之一,而rem表示相对于根元素的html的大小,所以1rem即表示视窗宽度的十分之一。这样通过rem于html的font-size的关系,间接实现了一个相对于视窗宽度的百分比。
flex布局
类似于百分比布局,无需计算百分比,可以很好的适配所有屏幕。手机天猫 典型的flex布局,flex做了很好的兼容处理,高度写死,可查看顶部搜索栏源码缺点:
有着和百分比布局一样的缺点,高度不便调整
有几种不同的flex标准,在低端ios和安卓中有着各种各样的兼容性问题
百分比布局
使用子元素在父元素下的百分比为单位,使用子元素在不同屏幕宽度下宽度表现一致。利用img标签的特性,只设宽度等图片加载完,这种方法会导致大量的重排,并且非固定高度会导致懒加载等功能难以实现
缺点:
宽度可以随屏幕适应,但高度不能,宽屏下会被拉伸,具体表现为,iphone 4中看到的是正方形,而到了iphone 6s中看到的是长方形。需要手动计算子元素在父元素下的百分比,计算麻烦百分比的大小往往需要精确到小数位6到8位。
字体适配
适配规则,段落文字在大屏上希望能看到更多文字,标题文字或字数固定的文字应该应用缩放原则,随屏幕变大而变化。视口不缩放,通过媒体查询去设置不同范围内的大小视口缩放,根据不同的dpr值去设置相应字体大小,标题文字或长度固定的文字可以使用rem单位去做适配。
vm布局
这是一个新的布局单位,目前android4.4以上支持,总共有四个vm,vh,vmin,vmax,分别表示视窗宽度,视窗高度,视窗宽高中的最小值,视窗宽高中的最大值。1vw表示百分之一的视窗宽度。
现在介绍新的纯CSS的相对单位vw,vh,它们相对的是终端视口,视口(移动端你就可以当成屏幕就好啦)的宽为100vw,高为100vh。使用起来很简单,如果你需要一个宽高各为视口一半的div,只需要在css里面这样写:div {width: 50vw ;height: 50vh},是不是很方便。但是有这么以一种情况,如果一个移动端页面某个元素按vw给宽度样式,页面随手机横屏时(vm,vh的相对值已互换)希望它的大小不变呢。你可以试试vmin,vmax。vmin代表vw与vh中较小的那一个,vmax代表vm与vh中较大的那一个。