用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的更多相关文章

  1. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  2. 手机端rem如何适配_rem详解及使用方法2

    作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...

  3. 谈谈css3的字体大小单位[rem]

    最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...

  4. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  5. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  6. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  7. 【原】谈谈对Objective-C中代理模式的误解

    [原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...

  8. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. IP变化,SVN和数据库的修改

    最近公司换了运营商,将启用新的IP地址,将以前项目的端口映射处理好之外,还需要切换SVN的地址. 项目开发中有可能要修改SVN的IP地址,entries文件里面包含svn服务器的地址信息.每个文件夹都 ...

  2. Vim 资料总结

    vi/vim基本使用方法:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html Vim命令合集: http://www.cnblog ...

  3. xml编辑器

    cstring转cha型方法在mfc中用过可行 int CstringToch(CString str, char *ch) { assert(ch); memset(ch, 0, sizeof(ch ...

  4. 参数名ASCII码从小到大排序(字典序)

    /// <summary> /// Hashtable字典排序 /// </summary> /// <param name="parameters" ...

  5. 在Xcode5中修改整个项目名

    总会遇到几个项目,在做到一半的时候被要求改项目名,网上找了下相关的资料,大多数是xcode5以前的版本,所以解决好了在这里mark一下,给需要的人. 目标为:将项目名XCD4改成xcd5. 先上结果图 ...

  6. CentOS7中安装MySQL(简便)及 网站的搭建

    一.首先,我们需要配置CentOS7中网络环境的搭建,物理机IP为192.168.100.39,虚拟机IP为192.168.100.139,网络模式设置为桥接模式 ,再进入系统挂载光盘.输入命令   ...

  7. go:关于变量地址的疑惑

    定义一些变量,并输出其地址 一.一般变量 var a, b int32 var c, d int64 输出其地址 结果: a 0xc082006310 b 0xc082006320 c 0xc0820 ...

  8. 7.iOS Notification

    1. 通知中心认识 通知中心实际上是在程序内部提供了消息广播的一种机制.通知中心不能在进程间进行通信,它只能进行程序内部通信,不能跨应用程序进程通信.通知中心,当通知中心接受到消息后会根据设置,根据内 ...

  9. Navicat Premium连接Oracle 问题汇总

  10. PHP面试总结

    从8月15号来到北京一直到今天,一月有余.来的这段时间一直准备笔试面试,大大小小的公司,乱七八糟面了10多家,近期才安顿下来.面试的这段时间感觉自己成长了不少.初来到这个陌生的城市一脸茫然,不会乘地铁 ...