淘宝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 ...
随机推荐
- python学习笔记:建立一个自己的搜索引擎
写学习笔记是我学习python以来养成的一个习惯,每学习一个知识点,便整理成文字记录下来.搜索引擎大家经常都有在使用,国内外也很很多搜索引擎平台. Google搜索引擎建立至今已经快20年了,之后全球 ...
- P1396 营救[最短路+二分]
题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...
- Fastdfs集群搭建
1.关于集群,网上说最少要三台,其实也没必要,两台就够了 2.实验环境 192.168.2.201 tracker.storage.nginx + fastdfs-nginx-module-maste ...
- 下载apache旗下Web服务器软件
apache官方网站:http://www.apache.org/ 1.百度搜索apache找到apache官网 2.进入apache官网打开旗下web服务器软件列表 3.进入apache旗下web服 ...
- python 图像识别的小应用
前些天看见了几个有趣的python项目,在自己实际测试和理解后贴一下代码. https://www.shiyanlou.com/courses/589/labs/1964/document 算法主要逻 ...
- 内存泄露检测之mtrace
————————————————版权声明:本文为CSDN博主「知耻而后勇的蜗牛」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog ...
- 在多语句事务内不允许使用 CREATE DATABASE 语句。
方法一:create database [ 项目名称] 方法二:update-database -verbose
- 2018 开始认真学习点python
2018 伊始,又是春暖花开.俗语,“一年之计在于春”.又是一年立志时. 决定认真学习一些web. 本来倾向与学习NodeJS的.可是之前买的python的书太多了.就先紧手头的资源看了再说吧. 今天 ...
- Ubuntu 执行 apt-get install ××× 报错
执行apt-get install fcitx时,报如下错误 grub-pc E: Sub-process /usr/bin/dpkg returned an error code (1) 通过执行下 ...
- Lock的lock/unlock, condition的await/singal 和 Object的wait/notify 的区别
在使用Lock之前,我们都使用Object 的wait和notify实现同步的.举例来说,一个producer和consumer,consumer发现没有东西了,等待,produer生成东西了,唤醒. ...