移动端是如何做适配的?

常用的解决移动端布局的方案大概有:

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
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值