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

比如设计稿量来的宽度是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. 【java测试】Junit、Mock+代码覆盖率

    原文见此处 单元测试是编写测试代码,用来检测特定的.明确的.细颗粒的功能.单元测试并不一定保证程序功能是正确的,更不保证整体业务是准备的. 单元测试不仅仅用来保证当前代码的正确性,更重要的是用来保证代 ...

  2. RequestsLibrary接口测试

    RequestsLibrary常用的关键字 关  键  字 描   述 Create Session 创建HTTP会话 Get Request 采用get方式请求 Post Request 采用Pos ...

  3. ftp列出具体目录的所有目录，和目录按照文件类型列出

    package com.haiyisoft.cAssistantWeb.util; import java.io.IOException; import java.io.PrintWriter; im ...

  4. LC 966. Vowel Spellchecker

    Given a wordlist, we want to implement a spellchecker that converts a query word into a correct word ...

  5. LC 662. Maximum Width of Binary Tree

    Given a binary tree, write a function to get the maximum width of the given tree. The width of a tre ...

  6. LC 358. Rearrange String k Distance Apart

    Given a non-empty string s and an integer k, rearrange the string such that the same characters are ...

  7. 手动集成 Ironic 裸金属管理服务（Rocky）

    目录 文章目录 目录 前文列表 横向扩展裸金属管理服务节点 配置基础设施 安装 Ironic(BareMetal) 安装 Nova Compute(BareMetal) 配置 Neutron 提供 P ...

  8. 阶段3 3.SpringMVC·_06.异常处理及拦截器_7 SpringMVC拦截器之拦截器接口方法演示

    返回值改成false 就是不放行 没有方形,控制台只有一个输出 转发到error页面 新建error.jsp页面 控制台只有拦截器的输出.controller根本就没有执行 把代码改回来 重写第二个方 ...

  9. 阶段3 3.SpringMVC·_03.SpringMVC常用注解_8 SessionAttributes注解

    SpringMvc提供的Model类 ModelMap继承LinkedHashMap 页面取值 把request这个对象全部输出了. SessionAttribute 取值 从sessionAttri ...

  10. 七十九：flask.Restful之flask-Restful标准化返回参数示例

    接上一篇的代码和数据 对于复杂结构的数据如果只是定义单一结构的话返回的数据就没意义了,此时定义的数据结构需精确到所有数据的每一个字段有时候要返回的数据结构中,会有比较复杂的数据结构,证实后可以使用一些 ...