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

比如设计稿量来的宽度是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. Laravel5.2中Eloquent与DB类的区别是什么？

    要了解这些先看看关于数据库组件的那些事儿(就是 Eloquent ORM) 数据库组件大概分了三层: 数据库连接层 查询构造层 应用层 来看一下每一层有哪些东西,分别对应文档的哪一部分: 数据库连接层 ...

  2. Hibernate系列1：入门程序

    1.传统的java数据库连接 在传统的开发中,如果要建立java程序和数据库的连接,通常采用JDBC或者Apache Commons DbUtils开发包来完成.他们分别有以下特点: JDBC: 优点 ...

  3. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

  4. [SQL Server常用系统存储过程大全]

    1.  sp_help   报告有关数据库对象(sys.sysobjects 兼容视图中列出的所有对象)  sp_help    表名称,存储过程名称等 2.  sp_helpdb   报告有关数据库 ...

  5. vue.js-动态绑定class 利用index实现导航

    <template> <div class="stock"> <div class="buin_leftcont nav_ctrl" ...

  6. [笔记] 基于nvidia/cuda的深度学习基础镜像构建流程 V0.2

    之前的[笔记] 基于nvidia/cuda的深度学习基础镜像构建流程已经Out了,以这篇为准. 基于NVidia官方的nvidia/cuda image,构建适用于Deep Learning的基础im ...

  7. 恒生投资交易系统性O3性能测量

    --每秒交易所成交量select b.tps, b.l_business_time from (select count(*) as tps, a.l_business_time from trade ...

  8. 【转】hbase meta表修复

    [From]https://www.iteye.com/blog/blackproof-2052898 meta表修复一 查看hbasemeta情况 hbase hbck .重新修复hbase met ...

  9. VS2015服务器资源管理器连接Mysql数据库

    下载安装文件mysql-for-visualstudio-1.2.3.msi 下载成功后执行安装,选择change-->选择Custom安装成功后,发现vs中没有效果. 注意这里再次执行安装文件 ...

  10. 将序列化成json格式后日期(毫秒数)转成日期格式

    System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaS ...