文档介绍：移动端页面适配四大方式前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?本文总结了四种方式。流体布局所谓的流体布局,就是用百分比来定义宽度,最外层容器的宽度设置为100%,就可以适配不同的屏幕,子元素按照比例来设置百分比,子元素整体的百分比之和就是100%,但是如果有子元素设置了边框,或者padding,那么整体的宽度就会大于100%,这时,我们可以将盒子的尺寸计算方式设置为从边框计算,通过设置:box-sizing:border-box,此时,盒子设置的宽度就是盒子的实际宽度,就没有这个问题了。宽度解决了,高度如何设置呢?一般的元素,高度可以固定不变,所以在屏幕变化时,我们可以看到元素的宽度变了,高度不变,但是对于图片,如果高度不同,图片就会被拉扁,此时我们可以将图片的宽度设为100%;它的宽度就由它的父级的宽度决定,图片的高度不设置,图片就会按照宽度变化等比例放大或缩小,这是图片的特性,这样就可以做到图片的适配了。流体布局的伪代码如下:*{box-sizing:border-box}.wrap{overflow:hidden}.banner{overflow:hidden}.bannerimg{width:100%}.l_con{width:%;height:50px;float:left;}.c_con{width:%;height:50px;float:left;}.r_con{width:%;height:50px;float:left;}响应式布局响应式布局,就是使用媒体查询的方式,针对不同的屏幕,对应不同的样式,但是移动端的屏幕很多种,如果要对应这么多套不同的样式,这样做也不现实,所以针对移动端,可以划分出三个屏幕宽度范围,在范围之内的,就使用同一套样式,这样定义三套样式就可以了,宽度的区间可以参照苹果手机的分辨率:374px以下为第一个区间,375px到413px为第二个区间,414px以上为第三个区间,按照这个三个区间定义三套样式,在苹果手机上可以做到很好的适配,但对于一些其他分辨率的手机,可能会有一些不太适配的细节,但是这三套,应该基本上是适用了。响应式布局的伪代码如下://最小尺寸样式……//大于等于375px尺寸样式***@mediascreenand(min-width:375px){……}//大于等于414px尺寸样式***@mediascreenand(min-width:414px){……}弹性盒子布局模型弹性盒子布局模型是一个新增的CSS布局模块,它带有流体布局和响应式布局的一些特性,而且它用少量的属性可以实现了多个元素的对齐方式,分布以及顺序等问题,用它能快捷高效的实现适配多终端的布局,这种模块简称为flexbox,flexbox布局模块的先后有三个版本,前两个版本的一些属性在最新的浏览器上已经得不到支持了,第三个版本在最新的浏览器上已得到广泛的支持。Flexbox布局模块是CSS3新增的一些属性,这些属性分为容器属性和条目属性,容器和条目是这种模块里面的概念,指的其实就是父元素和子元素。父元素通过设置display:flex来声明flexbox模块、通过flex-flow来设置子元素排列方式、通过justify