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

比如设计稿量来的宽度是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. oracle中监听程序当前无法识别连接描述符中请求服务 的解决方法

    早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务”错误,帮其解决后,发现很多人遇到过这样的问题,因此写着这里. ...

  2. Go 指针声明后赋值，出现 panic: runtime error: invalid memory address or nil pointer dereference

    指针基础知识package main import "fmt" func main() { var p *int p = new(int) *p = 1 fmt.Println(p ...

  3. BitmapRegionDecoder

    Android加载大图——BitmapRegionDecoder(转)   BitmapRegionDecoder,从API10就引入了.如下图:   NPONRY0T35GE$13{254X8Z1. ...

  4. 搭建Java服务器，并且实现远程安全访问linux系统

    1.通过ssh实现安全远程访问linux系统        ssh :secure shell         加密:       1. 对称加密 (加密密钥与解密密钥相同)          des ...

  5. Session案例-用户登录场景

    package com.loaderman.demo; import java.io.IOException; import java.io.PrintWriter; import javax.ser ...

  6. eclipse下写html

    3.创建静态web工程 打开eclipse,选择file,new project 或者 new other...,选择web项中的static web project ,next. 输入你的项目名,如 ...

  7. Java ——关键字 数据类型 变量 常量

    本节重点思维导图 Java程序结构 public class 类名 { public static void main(String[] args){ //……语句 } } 一门语言是由以下各种元素组 ...

  8. linux系统查看当前正在运行的服务

    --查看当前服务器所有服务 service --status-all -- 查看当前所有正在运行的服务 service --status-all | grep running --查看指定服务运行状态 ...

  9. numpy的divide函数

    和直接用/一样,都是矩阵的对应元素相除. 如果用*,那么是矩阵的对应元素相乘. 如果要实现矩阵乘法,用numpy的dot函数.

  10. Sink - 汇聚点

    !!!1.Logger Sink 记录INFO级别的日志,通常用于调试.   属性说明: !channel –   !type – The component type name, needs to ...