常用的解决移动端布局的方案大概有:
1.flex弹性布局
1)高度定死,宽度自适应,元素都采用px做单位。
2)随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。
2.百分比
3.用框架搭建页面
4.viewport适配
4.1 优点:
1)避免复杂的计算,直接使用UI的标准像素值
4.2 缺点:
2)不能使用meta标签 图片失真情况很严重
5.媒体查询media
6.rem+viewport缩放(也成为1px适配)
1)根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
5.1优点:
1)media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
2)图片便于修改,只需修改css文件
3)调整屏幕宽度的时候不用刷新页面即可响应式展示
5.2 缺点:
1)代码量比较大,维护不方便
2)为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
3)为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式
6.rem+less(sass)适配
1)viewport也是固定的
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。
2)通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)
3)css通过sass预编译,设置量取的px值转化rem的变量$px: (1/100)+rem;
flex布局
父级元素设置display:flex
子级元素通过flex参数来设置缩放比例,缩放条件、排列方式等
缺点:具有兼容性问题
rem布局
这里提供两种思路:
思路1
1)设置根节点字体大小为(为了方便,可以灵活设置:16、32、100等),布局时使用原px/@rem得出rem的值;
2)只需要在js中计算当前设备的clientwidth,然后用clientwidth/16(为font-size字体大小=1rem)–这里表示16rem为设备大小,即将设备看均分成1份
3)假设我们使用750px的设计稿,
举例:
(function () {
var styleNode = document.createElement("style");
/* 当不除以16时此时1em便占据视口宽度,
那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
// var w = document.documentElement.clientWidth;
/* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
var w = document.documentElement.clientWidth / 16;//获取视口大小
/* 设置此时根元素的fontsize,向html的style样式中添加font-size属性*/
styleNode.innerHTML = "html{font-size:" + w + "px!important}";
//向head标签中添加style标签,其中包含html{font