移动端布局、rem布局、手淘团队flexible.js、zoom缩放

本文介绍了作者在前端学习中对移动端适配的研究,重点探讨了rem布局和手淘团队的flexible.js。通过理解dpr和viewport,解释了flexible.js动态调整html font-size的原理。同时,讨论了dpr在实际应用中的作用,如解决高清显示问题。作者分享了自己对dpr的疑惑,并提出了仅依赖屏幕宽度调整font-size的做法。此外,提到了zoom属性在移动端适配中的局限性和问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

记录我的第一篇博客

   学习前端有一段时间,看博客一直是自己的学习习惯,今天我也来分享一下,从此以后,开始我的博客之旅(废话了几句),下面进入正题:


移动端适配,对于我来说,一直是一个头疼的问题;经过长期的挣扎,终于花了一整块时间去研究了一下rem布局;

我在网上看了很多关于rem的文章,大多都是介绍手淘团队的flexible.js,相信大多数人都读过大漠老师写的这篇文章,请仔细阅读文章;

flexible.js的原理

通过移动设备的dpr(设备像素比:设备像素比 = 物理像素 / 设备独立像素 ;window.devicePixelRatio)和屏幕宽度(document.document.clientWidth)来动态的改变html的font-size的大小

手淘团队flexibe github源码,中间有几个地方不明白;也看了很多解释得文章,也没能很好的理解

1.上面的那一句注释是不是写错了,ios下不是分2、3屏。他干嘛注释说用2倍方案???

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值