修改 flexible源码, 让iphone 6的750px宽度下，html的font-size为100px

最新推荐文章于 2024-05-24 10:50:41 发布
最新推荐文章于 2024-05-24 10:50:41 发布
阅读量728 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41893551/article/details/106387372
版权

事情起因

  • 我看了手淘适配方案 flexible 的源码，然后自己使用了这个库后，再对比 手机淘宝 的代码

  • 发现问题：

    • 我的项目下 <html style="font-size: 37.5px;">
    • 而手机淘宝 <html style="font-size: 100px;">

  • 感情 github 上面的库是坑我呢吧？居然不一样？？？


  • 为什么要改？

    • 设计稿，他就是一张以750px为基础设计的。那么问题来了，我们如何将设计稿中的各元素的px转换成rem。
    • 所以 750px 宽度下，font-size: 100px 有利于 px 转 REM 单位的换算
    • 目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：
1a   = 7.5px
1rem = 75px

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，对应的font-size为75px

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。


过程

我找了手淘网站的源码后，发现问题

!function(e,t){var n=t.documentElement,d=e.devicePixelRatio||1;function i(){var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){e.persisted&&i()}),2<=d){var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)


- 上面是打包过后的代码，其源码如下

(function flexible (window, document) {
   
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
   
    if (document.body) {
   
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
   
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
   
    var rem <
最低0.47元/天 解锁文章
水机.Threeki
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在设置html的字体大小为100px时，块级元素包裹的行内元素出现不正常下移
Anchor
10-23 1091
背景：准备写移动端自适应界面，使用rem单位，设置了html的font-size：100px，然后根据动态计算的ratio来具体设置页面各方面元素大小尺寸。 问题：当使用div包含的好几个inline-block显示的a标签的时候，a标签设置与div同高，结果如图，a不正常地几乎溢出了div 百思不得其解，以往似乎没有遇到过这样的问题，于是我重新简单写了一个测试页面，显示是正常的，于是我把两个...
Flexible源码分析
Ranger_AA的博客
09-24 334
Flexible源码分析（转载） // 立即执行函数 (function() {})() 或者 (function() {} ()) // 主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题 // 立即执行函数不需要调用，立马能够自己执行 (function flexible (window, document) { // 获取html的根元素 var docEl = document.documentElement // dpr 是物理像素比 var dpr =
修改手淘方案flexiblejs不再根据dpr的多少来缩放使移动端自适应开发更方便
08-09
修改手淘方案flexible.js，不再根据dpr的多少来缩放，使移动端自适应开发更方便
Vue 使用lib-flexible适配PC端（rem）+ unocss转px
想飞上天和太阳肩并肩
05-24 220
(node_modules\lib-flexible\flexible.js 大概在69行的refreshRem()函数)在node_modules依赖文件中找到flexible.js，修改 refreshRem() 函数。代码直接使用rem单位不方便阅读，安装postcss-px2rem插件可以自动把px转成rem。本文转载自：https://www.jianshu.com/p/9d05bca7c59d。在 main.js中直接引入lib-flexible。在vue.config.js中配置css。
移动端动态rem的计算方法 (1rem = 100px）
qq_37899792的博客
01-13 2059
一 在main.js中引入flexible.js vue项目中 import './assets/js/flexible' //vue jquery项目中 <script src="./js/flexible.js"></script> 二flexible.js全部代码如下 (function (win, lib) { var ...
flexible.js
09-19
淘宝的网页手机端采用了flexible.js对移动端进行适配，设计图一般为750px，单位为rem,计算方式为设计图测量的宽度/75（若设计图为640px，则应除以64）。例如，测量某一个div的高度为75px,则换算成rem为：75/75=1rem。
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
使用`lib-flexible`时，会根据设备的屏幕宽度动态调整html元素的font-size，从而改变rem的基准值。而`px2rem-loader`和`postcss-plugin-px2rem`则是在编译阶段自动将CSS中的px转换为rem，简化开发者工作。 需要注意...
vue项目中使用lib-flexible解决移动端适配的问题解决
12-09
例如，假设设计稿的宽度为750px，在引入`lib-flexible`后，1rem的值将是75px。如果你有一个元素在设计稿上的宽度为150px，那么在CSS中你应该设置它的宽度为2rem： ```css width: 2rem; ``` **注意**： - 如果你的...
vue打包的时候自动将px转成rem的操作方法
12-04
这里，`remUnit`参数表示设计图宽度除以10的结果，假设设计图是750px宽，那么`remUnit`应设为75。 ```javascript const px2remLoader = { loader: 'px2rem-loader', option: { remUnit: 75 // 设计图宽度÷10 } ...
移动开发网页设计-亚麻背景响应式图片画廊html5模板源码.zip
05-08
移动开发网页设计中，亚麻背景响应式图片画廊HTML5模板源码是一个重要的资源，它结合了现代网页设计的多种技术与理念，为开发者提供了一套完整的、适应多设备展示的网页设计方案。这个模板主要关注于图片展示，特别...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
font-size: 28px; border: 1px solid #ddd; } ``` 编译后将被转换为： ```css .selector { width: 2rem; height: 64px; font-size: 28px; border: 1px solid #ddd; } [data-dpr="1"] .selector { height: ...
flexible flex组件可配置源码
07-23
flexible flex组件可配置源码 用户可以自己使用组件配置页面
详解flexible源码（@0.3.2）
jjj_12138的博客
03-11 798
flexible源码详解（@0.3.2） 有关文章中不理解的移动端适配的概念，建议大家先去储备一些移动端适配方面的知识，当然，我之后也会做一个比较详尽的移动端适配方案的总结。 最近在看有关移动端适配的东西，lib-flexible是一款比较经典的适配框架，为了彻底的理解他，看了一下它的源码。我会在这里做逐段的分析，这里有完整的源码，大家可以参考一下。有任何意见和建议，希望大家积极讨论。 说回flexible，它的主要思想还是使用rem单位，根据屏幕大小的变化，动态改变根字体的大小，并且识别设备的dp
手淘flexible适配终端方案（二）源码理解
aron_H1的博客
11-20 508
最近在做的是公司的一个移动端项目。用的是手淘团队开源的flexible方案。阅读了源码后受益良多。源码不长，但短小精悍。 源码下载地址:https://github.com/amfe/lib-flexible。 源码如下： ;(function(win, lib) { var doc = win.document; var docEl = doc.documentEle...
淘宝flexible 分析源码，高级前端css面试题
2401_83621426的博客
04-11 730
/ reset rem unit on page resize 当页面尺寸大小发生变化的时候，要重新设置下rem的大小// pageshow 是重新加载页面触发的事件// e.persisted 返回的是true，就是说如果这个页面是从缓存取过来的页面，也需要重新计算一下rem的大小})// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法注意：立即执行函数 (function() {})() 或者 (function(){}())
html布局的适配 rem，font-size
qq_40578459的博客
08-12 1911
对于html布局随着屏幕的增大而增大，font-size也是一样，详细讲解一哈 ##第一步 1、刚开始做页面布局的时候大家大部分都是用用px来作为单位，虽然是可以的，但是这个字体的大小就被固定死了，不管是屏幕增大还是减小，字体都是不变的，这样往往达不到我们需要的结果，布局的结果也不是很友好，所以我们需要一个长度单位来适配就是 rem，刚开始学的时候特别的陌生 因为没看过这样的单位，今天就带大家来了...
vue2+vant适配750设计稿
weixin_60885570的博客
08-19 915
vant组件在750设计稿中的缩小
web前端开发—移动适配
m0_59451453的博客
05-23 1563
③目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。（1） 思考： 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？（1） 方法一： 配置EasyLess插件， 实现所有Less有相同的导出路径；1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？（1） 工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？2.思考： 目前，Less文件导出的CSS文件位置是哪里？① 变量：存储数据，方便使用和修改。
amfe-flexibleamfe-flexible可以自动给 < html > 设置font-size值为设备宽度的1/10npm:amfe-flexible - npm安装：npm i amfe-flexible配置：
最新发布
06-13
`amfe-flexible` 是一个用于响应式设计的工具，特别适合于移动端项目，它能帮助自动调整 `<html>` 元素的 `font-size` 值以适应不同设备的屏幕尺寸。要使用它，你需要按照以下步骤进行： 1. **npm 安装**: ```shell npm install amfe-flexible --save ``` 这将把 `amfe-flexible` 添加到你的项目依赖中。 2. **配置**: - 在项目中引入 `amfe-flexible`。通常在项目入口文件（如 `index.js` 或 `main.js`）的最开始位置添加： ```javascript require('amfe-flexible'); // 或者 import 'amfe-flexible'; ``` - 如果你想自定义字体大小的比例，可以设置一个全局变量，例如： ```javascript if (process.env.NODE_ENV === 'production') { require('amfe-flexible/lib/config').init({ fontScale: 0.1, // 默认值是 1/10，即1rem = deviceWidth / 10 }); } ``` - 注意，这个比例是相对于视口宽度的，`fontScale` 越小，字体越小，页面布局会更加紧凑。 3. **应用生效**: - `amfe-flexible` 会自动在文档加载完成后初始化，设置 `<html>` 的 `font-size`。如果你需要手动触发，可以在文档加载完成后调用 `amfe-flexible` 的实例方法： ```javascript const af = window.amfe-flexible; af.afterReady(); ``` 这样，`<html>` 的 `font-size` 就会随着设备宽度的变化而动态调整了。不过，这个工具更适合于开发阶段，生产环境可能需要其他方法来控制字体大小，以保持一致性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值