淘宝rem适配方案
/*
px 转化换 rem ,转化是 10 。
比如:
你的设计图为750,那么就 750 / 75 = 10 rem。
设计图中你量尺寸都要除 75 就是 rem值。再比如量的设计图按钮宽度 66px,那么计算:66 / 75 = 0.88rem 
比如2:
设计图为900,那么 900 / 90 = 10rem;
设计图中所有量的尺寸都得除 90 就等于 rem的之。
以此类推
*/
;(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
// adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
// set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
setRemUnit()
// reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
// detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))
淘宝rem适配方案的更多相关文章
- (淘宝无限适配)手机端rem布局详解(转载非原创)
		
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
 - (淘宝无限适配)手机端rem布局详解
		
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
 - 基于淘宝弹性布局方案lib-flexible的问题研究
		
上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...
 - 谈谈我的移动端rem适配方案
		
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
 - em与rem之间的区别以及移动设备中的rem适配方案
		
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
 - H5 端 rem 适配方案与 viewport 适配
		
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
 - 淘宝弹性布局方案lib-flexible实践
		
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
 - 淘宝弹性布局方案lib-flexible研究
		
1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈 ...
 - 淘宝 rem 机制入门学习
		
一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手.1 移动设备上的Px 像素不等于设备的物理像素.iphone 6 作为开发标准设备不等于设备的物理像素.iPhone 5 物理宽度320iPh ...
 
随机推荐
- Redis面试题记录--缓存双写情况下导致数据不一致问题
			
转载自:https://blog.csdn.net/lzhcoder/article/details/79469123 https://blog.csdn.net/u013374645/article ...
 - Nginx从安装到简单使用
			
一.什么是Nginx: Nginx是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务. 二.Nginx作用: 反向代理,集群,虚拟服务器,负载均衡,动静分离,解决跨域问题等 ...
 - Mongodb 的ORM框架 Morphia 注解 之 @Reference
			
public class BlogEntry { private String title; private Date publishDate; private String body; privat ...
 - java线程基础巩固---多线程死锁分析,案例介绍
			
之前已经学习了关于同步锁的知识,但是在实际编写多线程程序时可能会存在死锁的情况,所以这次来模拟一下死锁,并且学会用一个命令来确认是否程序已经出现死锁了,下面开始: 首先新建两个类: 此时当然得到Oth ...
 - 解压gz文件有误
			
tar: This does not look like a tar archive tar: Skipping to next header tar: Exiting with failure st ...
 - 【Jenkins】忘记admin密码,可以用此方法帮你解决
			
突然有一日发现自己忘记了jenkins的管理员密码,因为我一直登录的是另外一个非管理员账户.如果出现必须要使用管理员账户操作的,比如用户管理那里的,必须要管理员账号吧,这就尴尬了. 很方的我打开安装j ...
 - JavaScript 页面渲染
			
1. 从输入url到得到html的详细过程 1.1 加载资源的形式 输入 URL 或跳转页面 加载 html 1.2 加载一个资源的过程 浏览器根据DNS服务器得到域名的IP地址 向这个IP ...
 - Python中的字典分组函数(groupby,itertools)
			
from operator import itemgetter # itemgetter用来去dict中的key,省去了使用lambda函数 from itertools import groupby ...
 - BZOJ 5494: [2019省队联测]春节十二响 (左偏树 可并堆)
			
题意 略 分析 稍微yy一下可以感觉就是一个不同子树合并堆,然后考场上写了一发左偏树,以为100分美滋滋.然而发现自己傻逼了,两个堆一一对应合并后剩下的一坨直接一次合并进去就行了.然鹅我这个sb把所有 ...
 - 记一次k8s服务504 timeout
			
线上服务做集群扩容,调整了节点机器配置,在升级完毕之后,发现某些时候请求较慢,或者直接504 timeout 超时,必现情况,点击几次都是,且并没有代表性. 1.检查istio 日志是否有504 的日 ...