谈谈rem
用rem已久但是对于它的理解似乎一直都有偏差,使用的时候多采用的是html的font-size:62.5%;然后按照1rem=10px这样来使用。所以我一直不明白,这个rem到底哪里是相对单位了,也不明白它跟px的不同点又在哪里。迷惑了好久,然后就在今天,我翻到了一篇博客才知道自己用的多么肤浅。好吧,不再废话了,我们先来看看,rem到底是什么
rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
我们不禁要问一下,这个根元素指的是什么呢?问得好,根元素指的是html。回想我之前喜欢把html的font-size设置成62.5%,是用浏览器的默认字号16px*62.5%=10;然后页面中的元素按照1rem=10px来计算,但其实我们可以直接给html的font-size一个定值,为了计算方便我们首选肯定是10px,但这样是不好的。因为chrome不支持中文字体小于12px,所以会导致当计算小于12px的时候,会默认取12px去计算,导致中文版chrome的rem计算不准确。所以我们可以取个20px之流。
rem有什么好?
笨!都告诉你了,rem是相对于根元素字体的大小,那么当根元素的字体大小适应不同的移动端发生改变,元素的大小是不是也都跟着变?答案当然是肯定的啊!
那么我们应该怎么变?以及为什么要变?
首先我们来回答为什么要变的问题
目前的布局方式也就是我之前很喜欢的一种布局方式是:流式布局即通过百分比来定义宽度,但是高度歇斯,所以这样的话在比较大或者比较小的屏幕中会出现按钮太矮或者太低的情况。在我看来,其实也还好,毕竟是自己写的。。。不过我确实没怎么考虑过视觉设计师的想法就对了。。。
还有一些方法宽度写死之类我没有试过,感觉上也不是很好的实现方式
嗯,所以我认为流式布局+rem是个不错的实现方式
如何使用rem
如何使用的精髓其实在如何动态修改html的font-size,下面献上一段代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这段代码里决定性的部分在于 20 * (clientWidth/320),20就是你设定的html的font-size,而320则是你切图时的参考页面宽度
还有一种动态修改页面html的font-size的方法就是media-query了,但是我始终不喜欢media-query,屏幕设备辣么多,难道你每个都要写?就算你现在每个都写了,出了新的屏幕设备你是不是还得更新维护代码?这是治标不治本的典范。
兼容性?
我就知道下一步你们就要问这个了,话不多说,上图。
放心了吧~
嗯,就写这么多,然后附上原博客地址 http://isux.tencent.com/web-app-rem.html
谈谈rem的更多相关文章
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- 手机端rem如何适配_rem详解及使用方法2
作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...
- 谈谈css3的字体大小单位[rem]
最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...
- 从理解开始 谈谈px rem 和 em 的区别与联系
概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 【原】谈谈对Objective-C中代理模式的误解
[原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- php加密类
1.需求 了解php加密类的使用 2.例子 参考ci的3.1.2的新版加密类,一个不传参,用默认加密算法,加密模式的例子 //0.加载加密类 $this->load->library('e ...
- sss
function handleTouchEvent(event) { if (event.touches.length == 1) { var output = document. ...
- awk命令和grep命令的使用
1.遇到需求:用ping命令去检测系统网络延迟 跑 ping baidu.com -c 3,想要直接得到平均延迟. ping baidu.com -c 3 | grep rtt | awk -F \/ ...
- HTML5复习整理
一.推出的目标 web浏览器兼容性低:文档结构不明确:web应用程序的功能受限 二.语法的改变 内容类型(html或htm):DOCTYPE声明简化:指定字符编码简化:可以省略标记的元素:具有Bool ...
- 【转】linux 设置用户id 设置组id
linux 设置用户id 设置组id 转自 linux 设置用户id 设置组id 最近看apue,简单记录对设置用户id理解(设置组id同理). 1. 相关的id好像很多,共有哪些? 文件2个 ...
- 如何将 Windows Server 2012 r2 打造成 Windows 8.1?
Server 系列相对于桌面系统Windows 8.1 .嵌入式系统Embedded 8.1来说,还是有所不同的,有其独特性,所以,标题写着“打造”充其量不过是不断接近的意思.还有很多地方存在进一步深 ...
- dom操作导致超级卡顿。。。
var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...
- CodeForces 589J Cleaner Robot
题目链接 题意:一个机器人打扫卫生,URDL代表初始时机器人面对的方向上右下左. ' . ' 代表可以打扫的, ' * ' 代表家具,如果机器人遇到家具就顺时针转90度,问机器人能打扫多少面积. 题解 ...
- [转]utf8编码原理详解
from : http://blog.csdn.net/baixiaoshi/article/details/40786503 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态 ...
- pycharm配置字体问题
A scheme with this name already exists or was deleted without applying the changes 解决办法:$cd ~/.PyCha ...