首先大家最关注的怎么使用，原理不原理是后面的事

比如设计稿量来的宽度是100px

那么我们布局的时候，就这么写{width:1.3333rem}，1.3333rem是由100/75算出来的，以此类推200px，就是{width: 2.6667} ，2.6667是由200/75计算得来

大家会很奇怪，为什么是除以75，不是除以750，或者其他数字，难道每次都要用计算器去计算rem的值吗

原理来了

75这个数字是这么来的，75=750/10，就是把750分成10份，可以理解成75=1份，75px=1rem，相当于计算100/75，其实就是100里面有几份，也就是100里面有几个rem

那要怎么实现等比缩放呢

HtmlfontSize =(window. inner Width/750)*75

然后设置 html font -size的值为HtmlfontSize

这里设置的就是1rem=HtmlfontSize 个px

由此我们通过动态HtmlfontSize，实现了等比缩放，好像是实现了，但是还是有点懵

为什么要这么做

那就要自己尝试去实现等比缩放布局，还是以主流的750设计稿为例

还是以100px为例，在375的屏幕宽度，我就要写成50px，在414的屏幕宽度我就要写成55.2px，我们很容易得到一个公式，当前的屏幕宽度/750 ，再乘以100，就得到我们所需要的尺寸，固定的是什么，变化的又是什么

固定的是100px，控制缩放的是屏幕宽度/750的比率

为了方便布局，那我给font-size设置  屏幕宽度/750的值

然后布局我应该怎么写呢，貌似还是无从下手

好了，编不下去了，自己去想把，有空再编

淘宝flexible.js的使用的更多相关文章

  1. 摘自淘宝的js地区组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  3. 手机淘宝用JS来动态写meta标签（1像素边框处理方法）

    var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'v ...

  4. 淘宝 rem 机制入门学习

    一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手.1 移动设备上的Px 像素不等于设备的物理像素.iphone 6 作为开发标准设备不等于设备的物理像素.iPhone 5 物理宽度320iPh ...

  5. 淘宝地址爬取及UI展示

    淘宝地址爬取及UI展示 淘宝国家省市区街道获取 参考 foxiswho 的 taobao-area-php 部分代码,改由c#重构. 引用如下: Autofac MediatR Swagger Han ...

  6. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  7. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  8. 淘宝适配 flexible.js

    1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src=" ...

  9. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

随机推荐

  1. This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interface{}. When it did unmarshal using map[string]interface{}, a number with “int” was changed to “floa

    This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interf ...

  2. 【原】vue-router中params和query的区别

    1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }) params ...

  3. MIL/SIL/PIL/HIL/VIL

    MIL:Model in the loop 模型在环,对模型在模型的开发环境下(如SIMULINK)进行仿真,通过输入一系列的测试用例,验证模型是否满足设计的功能需求.验证控制算法模型是否准确地实现了 ...

  4. Cortex-M3 异常中断向量表

    [Cortex-M3异常与中断] 支持10个系统异常和最多240个外部中断: 支持3个固定的高优先级和多达256级的可编程优先级,支持128级抢占: #0~15在Cortex-M3中定义,IRQ#0~ ...

  5. [redis]redis实现分页的方法

    每个主题下的用户的评论组装好写入Redis中,每个主题会有一个topicId,每一条评论会和topicId关联起来,大致的数据模型如下:{ topicId: 'xxxxxxxx', comments: ...

  6. Ubuntu为mysql的root用户密码问题

    1.root用户免密码登录mysql Ubuntu装完mysql时,root用户可以免密登录,如果设置的root用户密码忘记了,想要使用root用户免密登录,修改在配置文件的[mysqld]节点下添加 ...

  7. golang depth read map

    Foreword: I optimized and improved the below solution, and released it as a library here: github.com ...

  8. Linux系统编程——基础命令总结

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/asialee_bird/article/ ...

  9. HCL试验七

    在静态路由的基础上实行动态路由 对每台路由器的直连ip编写动态路由命令 路由器1 rip 1 network 192.168.1.0 network 10.1.1.0 undo summary und ...

  10. 03-初识JavaScript

    一. JavaScript简介(了解) 1. JavaScript的历史背景介绍 布兰登 • 艾奇(Brendan Eich,1961年-),1995年在网景公司,发明的JavaScript. 一开始 ...