用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. Maximal Rectangle

    很不好想的一道题,参考:http://blog.csdn.net/doc_sgl/article/details/11832965 分为两步:把原矩阵转为直方图,再用largest rectangle ...

  2. PHP获取某月天数

    方式一: <?php function days($year,$month){ if($month<10){ $month = '0'.$month; } if($month == 12) ...

  3. grub2添加win引导(未试用)

    http://www.ruesin.com/system/centos/centos7-grub2-193.html

  4. ubuntu-docker-consul-swarm-shipyard-portainer

    --- env --- root@node1:~# cat /etc/issueUbuntu 12.04.4 LTS \n \l root@node1:~# docker -vDocker versi ...

  5. navicat 破解

    首先上官网上下载LINUX版本: http://www.navicat.com/download 下载 navicat110_mysql_en.tar.gz 文件 下载后解压tar文件 tar -zx ...

  6. 10.OC中retainCount返回值不准的原因

    翻看该方法的参考文档,苹果对retainCount方法的描述如下: retainCount Do not use this method. (required) - (NSUInteger)retai ...

  7. IE8下导入EXCEL数据传到客户端以附件下载

    IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...

  8. java的异常总结

    异常:在java程序中也出现不正常的情况,这个就叫异常.java是面向对象的语言.任何事物都可以用类来描述,同样异常也是一种事物,java中提供了很多异常类 很多异常堆积起来叫做异常体系 Throwa ...

  9. Python中内置数据类型list,tuple,dict,set的区别和用法

    Python中内置数据类型list,tuple,dict,set的区别和用法 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, ...

  10. ble示例代码

    ble代码下载: https://github.com/sutogan4ik/Android-BLE-GATT-Master-Slave