/*
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适配方案的更多相关文章

  1. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  2. (淘宝无限适配)手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  3. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

  4. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  5. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

  6. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  7. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  8. 淘宝弹性布局方案lib-flexible研究

    1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈 ...

  9. 淘宝 rem 机制入门学习

    一 移动设备尺寸多种多样,带来适配难度,有时甚至无从下手.1 移动设备上的Px 像素不等于设备的物理像素.iphone 6 作为开发标准设备不等于设备的物理像素.iPhone 5 物理宽度320iPh ...

随机推荐

  1. 前端理解控制反转ioc

    工作一直都是写前端,而且都是偏业务的.相关的框架代码层面的了解还是有很大的缺失.一直想多写些维护性,可读性强的代码. 这段时间对控制反转ioc,这样的设计有了一个初步的了解. 前端为弱语言,平时代码的 ...

  2. 自定义flask转换器

    自定义flask转换器 以匹配手机号为例: # 1. 定义自己的转换器 class MobileConverter(BaseConverter): def __init__(self, url_map ...

  3. asp.net mvc 防止跨站攻击

    View @using (Html.BeginForm("Contact","Home",FormMethod.Post)) { @Html.AntiForge ...

  4. Linux系统管理——用户、组

    单用户OS和多用户OS? Linux是多用户OS,Windows是单用户OS.很多人会疑惑? Windows7也可以创建多个用户啊,怎么能说是单用户OS呢? 这里的多用户指的是OS同时可以被多个人访问 ...

  5. C# Parellel.For 和 Parallel.ForEach

    简介:任务并行库(Task Parellel Library)是BCL的一个类库,极大的简化了并行编程. 使用任务并行库执行循环C#当中我们一般使用for和foreach执行循环,有时候我们呢的循环结 ...

  6. 使用fiddler进行接口测试

    我们来说说如何使用fiddler做接口测试? 测试准备,抓到相应的接口和入参或者找接口文档,我这里就用聚合数据里面的接口做样例, 接口如下: 测试接口:http://japi.juhe.cn/qqev ...

  7. Python&Selenium 数据驱动【unittest+ddt+Excel】

    一.摘要 一般情况下我们为了更好的管理测试数据会选择将测试数据存储在Excel文件当中去,本节内容将展示给读者将测试数据存储在Excel文档中的案例. 二.创建存储测试数据的Excel 创建一个Exc ...

  8. 企业IT运维以及信息管理部服务器管理

    方法 1.服务器有必要保持简洁.除了必要的应用软件以及安全软件之外,尽量不要安全其它的软件. 2.要做好服务器帐号权利规划和分配,分配够用的权利就行,从而降低密码泄漏带来的损失. 3.注意关注服务器软 ...

  9. Elasticsearch: nested对象

    在处理大量数据时,关系数据库存在很多问题. 无论是速度,高效处理,有效并行化,可扩展性还是成本,当数据量开始增长时,关系数据库都会失败.该关系数据库的另一个挑战是必须预先定义关系和模式.Elastic ...

  10. springboot mybatis 的SQL异常不输出错误到控制台问题排查

    项目中使用springboot集成 mybatis,运行过程中查询SQL列在表中不存在,但系统不输出任何错误到控制台 但SQL是打印的,只是没有任何异常信息 将SQL复制出来到数据库中运行,才发现错误 ...