关于移动端rem 布局的一些总结

时间:2022-09-03 07:38:15

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. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  2. 移动端REM布局模板&lpar;阿里高清方案&rpar;

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  3. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

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

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

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

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

  6. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  7. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  8. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  9. 十八、移动端rem布局

    使用rem布局,首先要知道自己是根据UI给的视效图的多少基准的,这里是以750px为基准,代码如下: //rem布局,此处根据750px来设置,放大100倍 (function(doc, win) { ...

随机推荐

  1. js正则表达式校验非零的正整数:&Hat;&lbrack;1-9&rsqb;&bsol;d&ast;&dollar; 或 &Hat;&lpar;&lbrack;1-9&rsqb;&lbrack;0-9&rsqb;&ast;&rpar;&lbrace;1&comma;3&rcub;&dollar; 或 &Hat;&bsol;&plus;&quest;&lbrack;1-9&rsqb;&lbrack;0-9&rsqb;&ast;&dollar;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. iPad apple-touch-startup-image实现portrait和landscape

    iPad apple-touch-startup-image实现portrait和landscape 为ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,网上的朋友都说无 ...

  3. 【JS复习笔记】00 序

    作为一个前端苦手,说是复习,你就当我是重学好了. 好吧,我当然不可能抱着一个砖头去复习,所以捡了本薄的来读——<JavaScript语言精粹>. 当初带我的人说这本书挺好,就看这本书好了. ...

  4. 在IT在系统中使用多租户技术的跨部门和虚拟团队的解决方案为员工提供(草案)

    1 前言 经过多年的企业信息化建设,Office系统逐步形成有9营业场所的分部门.9专业应用子系统.20独立的信息模块.330一种方法.这些系统或模块内置于Microsoft IIS.Apache T ...

  5. AndroidStudio push代码到github

    步骤 1 studio的git配置: 安装好git后启动Androidstudio,打开如下路径File->Settings->Version Control(展开)->git 在P ...

  6. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  7. 设计模式——辛格尔顿(Singleton)

    要想正确理解设计模式,首先必须明白它是为了解决什么问题而提出来的. 设计模式学习笔记 --Shulin 转载请注明出处:http://blog.csdn.net/zhshulin 单例模式属于设计模式 ...

  8. c&plus;&plus;中类对象的内存对齐

    很多C++书籍中都介绍过,一个Class对象需要占用多大的内存空间.最权威的结论是: *非静态成员变量总合.(not static) *加上编译器为了CPU计算,作出的数据对齐处理.(c语言中面试中经 ...

  9. div布局之面向对象

    栗子之导航条(navbar) http://www.runoob.com/try/try2.php?filename=bootstrap-using-glyphicons-navbar <!DO ...

  10. Linux记录-linux系统监控命令汇总

    命令 功能应用 用法举例     free 查看内存使用情况,包括物理内存和虚拟内存 free -h或free -m     vmstat 对系统的整体情况进行统计,包括内核进程.虚拟内存.磁盘.陷阱 ...