1.rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位

2.为什么web app要使用rem?

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同

第一个例子:
html{font-size:10px;}
a{width:1rem;height:1rem}
10px = 1rem * 10px 第二个例子:
html{font-size:20px;}
a{width:1rem;height:1rem}
20px = 1rem * 20px 推算出:
10px = 1rem 在根元素(font-size = 10px的时候);
20px = 1rem 在根元素(font-size = 20px的时候);
40px = 1rem 在根元素(font-size = 40px的时候);

html设置成100px是为了方便我们计算,如 6rem等于600px。

一.常规情况下js根据屏幕宽度动态计算

(function(doc,win){
var docEl = doc.documentElement;
var resizeEvt = "onorientationchange" in win ? "orientationchange" : "resize";
var Timer = null;
function recalc(){
var clientWidth = docEl.clientWidth || win.innerWidth;
//设计稿是640px
var initSize = (clientWidth/640) * 100;
var fontSize = clientWidth > 768 ? 120 : (initSize < 50 ? 50 : initSize);
docEl.style.fontSize = fontSize + "px";
}
doc.addEventListener("DOMContendLoaded",recalc,false); //转屏
win.addEventListener(resizeEvt,function(){
clearTimeout(Timer);
Timer = setTimeout(recalc,300)
},false); //pageshow,缓存相关
win.addEventListener("pageshow",function(e){
if(e.persisted){
clearTimeout(Timer);
Timer = setTimeout(recalc,300)
}
},false); // 初始化
recalc(); })(document,window);

设计稿一般都是640宽的,psd转换为 html+css 的时候我们是按照320来做的(用css像素来度量的话,iPhone4、iPhone5都是这个尺寸)。在没有使用rem而是直接把字体、高度之类的写死的时候,在ps中量出来宽高、字体什么的每次都得手动除以2再写到css中。。现在我设定的基准是320下面html{font-size:50px},主要是方便每次在ps中测量完了之后不用除以2.

二.rem布局字体不用rem值是因为在Retina屏幕下会变的很大,而这时候我们更希望在大屏幕上显示更多的内容,在淘宝中是用了dpr是判断

if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
document.documentElement.setAttribute('data-dpr', dpr);
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
} [data-dpr="2"] div {
font-size: 24px;
} [data-dpr="3"] div {
font-size: 36px;
}

REM 布局的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  3. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  4. 手机端页面自适应解决方案—rem布局

    只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...

  5. 一看就懂得移动端rem布局、rem如何换算

    这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...

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

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

  7. webapp,liveapp: 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  8. 移动端rem布局和百分比栅格化布局

    移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...

  9. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

随机推荐

  1. ArcGIS 10与ArcEngine 10安装及破解

    1 2 3 4 5 分步阅读 一键约师傅 百度师傅高质屏和好师傅,拯救你的碎屏机 百度经验:jingyan.baidu.com 现在常见的破解方法在下面的地址中已经详细附图说明了,但是这种破解方法,想 ...

  2. Easyui的Dialog的toolbar的自定义添加

    最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...

  3. 【水】基于ege的简单3D模拟

    我们模拟从被观察物体射出光线,在眼球焦点交汇,然后打到视网膜上成像 ——足够了吧,剩下的难度应该是普及- 只是有一些常数可以自己调一下,看着顺眼就好 #include <graphics.h&g ...

  4. A star 寻路

    大白话说一下几个点: 通俗的来说,其实就是以一个规则来 从A点走到B点. 怎么来判断我们走的格子是一个合适的格子? 就是靠一个规则来计算,这个规则就是估价函数. 估价函数: 常用:曼哈顿算法 F = ...

  5. CSV格式数据如何导入SqlServer?

    一.使用微软数据库IDE管理软件:Microsoft SQL Server Management Studio 1.标准的CSV文件格式如下: 2.建数据表 3.在需要导入的数据库右键点击“任务”,选 ...

  6. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  7. webform 复合控件

    RadioButtonList  单选按钮列表 属性:RepeatColumns 用于布局项的列数(每一行的个数) RepeatDirection 选择Vertical,纵向排列:选择Horizont ...

  8. JavaScript:Location

    读取.设置url 在url中输入:http://www.cnpiont.com:8090/index.html?user=like&pwd=123#title Console输入: docum ...

  9. 如何使用QQ号进行快捷登录

    注意:第三步回调地址域名必须严格按照规范填写否则无法使用.QQ回调地址域名为您的网站地址无论您是否为DISCUZ论坛,请全部使用网站申请.discuz论坛申请的KEY无效注册QQ登录应用将会获得该应用 ...

  10. JQuery全选Prop(“check”,true)和attr("attr",true)区别

    $scope.selectAll = false; //点击单选框的时候是不是全选 $scope.checkIsAll = function(){ var wipeCheckBoxObj = $(&q ...