淘宝flexible.js的使用
首先大家最关注的怎么使用,原理不原理是后面的事
比如设计稿量来的宽度是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的使用的更多相关文章
- 摘自淘宝的js地区组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 手淘的flexible.js解决手机适配问题
如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...
- 手机淘宝用JS来动态写meta标签(1像素边框处理方法)
var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'v ...
- 淘宝 rem 机制入门学习
一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手.1 移动设备上的Px 像素不等于设备的物理像素.iphone 6 作为开发标准设备不等于设备的物理像素.iPhone 5 物理宽度320iPh ...
- 淘宝地址爬取及UI展示
淘宝地址爬取及UI展示 淘宝国家省市区街道获取 参考 foxiswho 的 taobao-area-php 部分代码,改由c#重构. 引用如下: Autofac MediatR Swagger Han ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- 淘宝适配 flexible.js
1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src=" ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
随机推荐
- Qt加载本地字体 .ttc或.ttf
版权声明:支持原创,转载请说明~ https://blog.csdn.net/luoyayun361/article/details/54934437 //设置本地字体,黑体简 int fontId ...
- github搜索不到代码的问题
Hi team, Please check the following three query url :https://github.com/Konctantin/GreyMagic/search? ...
- 做一个把网页带出来的SpringBoot工程
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- IDEA内存设置
之前,博主的idea一直运行正常,今天,开发了一个接口,因为接口在项目中另一个模块,之前从来没有启动过这个模块,由于调试接口将该模块也放到tomcat容器中,结果我的idea不停崩溃,于是查看idea ...
- ipv4 ipv6 求字符串和整数一一映射的算法 AmazonOrderId
字符串和整数一一映射的算法 公司每人的英文名不同,现在给每个英文名一个不同的数字编号,怎么设计? 走ipv4/6 2/32 2/128就够了,把“网段”概念对应到“表或库”,ip有a_e5类,这概念 ...
- firefox浏览器插件---网址优化
安装:YSlow插件 之后还必须安装firebug.否则YSlow不能使用. 安装:firebug 下面就可以了
- Redis ==> 集群的三种模式
一.主从同步/复制 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会丢失(或少量丢失)数据,因为持久化会把内存中数据保存到硬盘上,重启会从硬盘上加载数据. 但是由于数据是存储在一台服务器 ...
- yum安装epel源
国内yum源的安装(163,阿里云,epel) 国内yum源的安装(163,阿里云,epel) ----阿里云镜像源 1.备份 mv /etc/yum.repos.d/CentOS-Base.re ...
- [转]【JVM】调优笔记2-----JVM在JDK1.8以后的新特性以及VisualVM的安装使用
[From]https://www.cnblogs.com/sxdcgaq8080/p/7156227.html 隔壁的,加个引用做书签! [JVM]调优笔记2-----J ...
- Linux中如何批量删除目录下文件后缀
1. rename rename分为perl版本和C版本,以下截图是C版本效果: perl版本:rename 's/.bak//' *.bak 2. for循环+awk 3. for循环+cut 4. ...