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

最新推荐文章于 2025-07-29 16:53:12 发布
最新推荐文章于 2025-07-29 16:53:12 发布
阅读量5.8k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/orange0111/article/details/52800879
本文介绍了作者在前端学习中对移动端适配的研究，重点探讨了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倍方案？？？

最低0.47元/天 解锁文章

200万优质内容无限畅学
orange0111
关注
移动端热点问题
MingL520的博客
05-31 596
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 3052
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
flexible.js
06-12
flexible.js手淘框架，是一个用来适配移动端的js框架。手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
移动端布局方案二:rem+flexible.js
温大侠的博客
07-07 830
我们通过rem+媒体查询+less布局时,需要针对一些市面上常见的屏幕尺寸做媒体查询适配,比较麻烦,这里推荐一个淘宝移动团队出的插件,它会自动设置当前屏幕宽度除以10的值作为当前html的font-size. 准备工作: 使用vscode开发,安装插件cssrem,它可以自动帮我们计算css中px值对应的rem值,只需要为它设置一个计算所需的rootFontSize即可,它会以px值除以rootFontSize对应的值来得到rem值,通常以设计稿的宽度除以10作为rootFontSize,比如这里以75
JavaScript：移动端rem适配方案（flexible.js）
Dy大叔的日常
05-27 589
initial-scale：‘设置页面的初始缩放值，为一个数字，可以带小数’；maximum-scale：‘允许用户的最大缩放值，为一个数字，可以带小数’；user-scalable：‘是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许’；
大屏数据可视化适配三种方案： rem 、scale 和 zoom
旺旺
08-30 4316
大屏数据可视化适配三种方案： rem 、scale 和 zoom
手淘 php页面,使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端...
weixin_35688459的博客
03-11 223
本帖最后由 学霸_ios之webapp 于 2016-11-4 14:33 编辑meta标签标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。留个悬念，因为后面的解决方案中需要重度依赖m...
手淘的rem布局
weixin_30627341的博客
11-13 120
http://caibaojian.com/simple-flexible.html 转载于:https://www.cnblogs.com/chenchenhao/p/9951444.html
flexiblejs + pxtorem 实现浏览器缩放适配：兼顾系统缩放与文本放大体验
最新发布
醒途
07-29 903
本文提出一种兼容系统缩放和浏览器缩放的rem适配方案，通过结合flexible.js和postcss-pxtorem实现：1）使用postcss-pxtorem自动转换设计稿px为rem；2）改造flexible.js引入browserZoom参数，使rem基准值能响应浏览器缩放；3）通过zoom.ts监测系统与浏览器缩放比例。该方案在保持设计稿精准还原的同时，支持用户通过浏览器缩放获得真实的放大/缩小体验，提升了页面可访问性，兼容多端设备且不影响现有UI组件。
基于echarts+js+fexible.js实现的数据可视化适配案例（附源代码）
m0_53619602的博客
07-25 4891
数据可视化 ：借助于图形化手段，清晰有效地传达与沟通信息ECharts：是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。数据可视化场景：ECharts使用五部曲：步骤一：下载并引用echarts.js文件:https://echarts.apache.org/zh/index.html 步骤二：准备一个具备大小的DOM容器 步骤三：初始化echarts实例
手淘rem适配方案
weixin_34130389的博客
05-31 682
前置知识：什么是rem CSS3新增的一个相对单位rem（root em,根em）.rem是相对于根节点（或者是html节点）.如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px。 前置知识：什么是dpr 在浏览器控制台中输入 window.devicePixelRatio 复制代码可以获取当前设备的dpr 那么什么是dpr? dpr就是设备物...
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
H5自适应屏幕分辨率大小
weixin_33671935的博客
08-15 2729
　说明： ①：H5自适应不同分辨率的设备，其实主要就一句 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> width=device-width 屏幕宽度；initial-scale...
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2368
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
flex布局
白羊座的橙子
04-25 401
1、认识flex布局 flex布局是目前web开发中使用最多的布局方案： flex布局(又称为 Flexible布局，弹性布局) 目前在移动端使用的最多，在pc端也越来越普及 两个重要的概念 开启flex布局的元素叫做 flex container flex container里面的直接子元素叫做 flex items 设置元素的display属性为flex或者inline-flex可以称为flex container flex：flex-container为块级元素 inline-fl.
flex弹性布局
2203_75684778的博客
11-16 806
以下6个属性设置在容器上。3.1flex-direction属性属性决定主轴的⽅向（即项⽬的排列⽅向）。不光调整顺序，还会调整基准的起点row（默认值）：主轴为⽔平⽅向，起点在左端。：主轴为⽔平⽅向，起点在右端。column：主轴为垂直⽅向，起点在上沿。：主轴为垂直⽅向，起点在下沿。3.2flex-wrap属性默认情况下，项⽬都排在⼀条线（⼜称"轴线"）上。flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。
移动端H5 不同设备 px表现不一致
weixin_40577113的博客
11-19 831
<!DOCTYPE html> <html> <head> <style> html,body{ padding: 0; margin: 0; } </style> </head> <body> <div style="background: black;width: 375px;...
手淘flexible.js框架详解：适配与源码解析
在移动互联网时代，为了确保网页在不同尺寸的设备上都能良好显示，手淘flexible.js框架应运而生。该框架主要用于解决移动端浏览器的适配问题，使得开发者可以更加便捷地创建响应式布局。以下将深入探讨其中的关键...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值