淘宝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 ...
随机推荐
- <script> 为什么不再使用 type="text/javascript" 【问题】
1.为什么在 <script> 标签中不需要使用 type="text/javascript" 就可以写jQuery代码 ? <head> <scri ...
- c#开启线程池超出索引
这样写会超出索引,foreach好像不会超出,原因可能是开启线程池需要时间,成功开启之后,一次循环已经结束,这个没有验证. 以下这个做法是不对的,我也是看网上的贴这样写,结果是少执行了一个.推荐大家还 ...
- string+DFS leetcode-17.电话号码下的字母组合
题面 Given a string containing digits from 2-9 inclusive, return all possible letter combinations that ...
- sqlAlchemy搭建sqliteOrm
一:引入文件 from sqlalchemy import Column, Integer, VARCHAR, Text from sqlalchemy import create_engine fr ...
- Computer Vision_18_Image Stitching:A survey on image mosaicing techniques——2013
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- python基础应用---列表应用
列表:列表用[]来表示 names = ['wang', 'yuan', 'yang', 'china', 'french', 'wang'] #列表增加 names.append('zhang') ...
- hive中计算某个日期是星期几的算法
pmod(floor((unix_timestamp('2019-06-11 00:00:00')-unix_timestamp('1970-01-05 00:00:00'))/(3600*24)), ...
- temp数据预处理--以24h为周期的序列
1.按照周期来截取数据 从数据库加载下来的是以5min取一次mean()的列,因此24h应取了24*60/5=288次数据 首先把这8352个数据(最后一个以倒数第二个填充)改成288*30的形式 t ...
- JS 禁用按钮10秒方法
方式一:禁用10秒,10秒钟后可用 /** * 按钮禁用10秒 * @param submitButtonName 按钮ID名 */ function disabledSubmitButton(sub ...
- 验证码输入自动聚焦下一个input或者删除自动聚焦上一个input
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...