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

比如设计稿量来的宽度是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. 梯度下降(Gradient Descent)小结 -2017.7.20

    在求解算法的模型函数时,常用到梯度下降(Gradient Descent)和最小二乘法,下面讨论梯度下降的线性模型(linear model). 1.问题引入 给定一组训练集合(training se ...

  2. 发布Rest风格的WebService的SpringBoot极简例子

    JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...

  3. Centos 安装freesurfer fsl matlab 等软件---转自网络

    freesurfer: freesurfer好安装,只需要下载官网源码包,如freesurfer5.3.tar.gz 下载至本地,解压: tar zxvf freesurfer5.3.tar.gz - ...

  4. 在WPF中使用AForge控件

    AForge.NET 是用C#写的一个关于计算机视觉和人工智能领域的框架,它包括图像处理.神经网络.遗传算法和机器学习等. 要实现视频功能,需要使用AForge.Controls命名空间中的Video ...

  5. [SPSS]如何利用spss进行单侧检验

    根据网上经验来看,结论如下: 单双侧t检验,t值不变,p值除以2即为单侧p值.

  6. Spring-AOP简单实现方式

    AOP的专业术语: 1.创建Maven管理项目: pom.xml导入依赖 <properties> <!-- springframe 版本控制 --> <spring.v ...

  7. 阶段3 3.SpringMVC·_07.SSM整合案例_08.ssm整合之Spring整合MyBatis框架

    service能供成功的调用到service对象就算是整合成功 如果能把生成的代理对象也存大IOC的容器中.那么ServiceImpl就可以拿到这个对象 做一个注入,然后就可以调用代理对象的查询数据库 ...

  8. MySQL操作符与相关函数

    union(联合)union使用是关联两张表或者两个查询所查出来的数据,联合成一张表但不会出现重复数据,显示的字段必须匹配列数. select s3.id cid,s1.cityName provin ...

  9. stringstream 类型转换

    stringstream可以吞下不同的类型,然后吐出不同的类型. 这样可以实现int,string,double等类型的转换 #include<sstream> using namespa ...

  10. Python：Base2（List和Tuple类型， 条件判断和循环，Dict和Set类型）

    1.Python创建list: Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: &g ...