Rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

我们来看一个简单的代码实例：

			html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

			body {font-size: 1.4rem;/*1.4 × 10px = 14px */}

			h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？哈。。。。大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。

rem第一天的更多相关文章

  1. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  2. （转）px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  3. css3 rem的用法

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  4. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. rem是如何实现自适应布局的？

    http://caibaojian.com/web-app-rem.html 使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应适配也是同个道理,不过是js更精确一点.使用媒体查询: html ...

  6. web app变革之rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  7. WebApp开发之--"rem"单位(转)

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  8. web app变革之rem（手机屏幕实现全适配）

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  9. web app 变革之rem

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

随机推荐

  1. LeetCode：二叉树的前序遍历【144】

    LeetCode:二叉树的前序遍历[144] 题目描述 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 题目分析 如果用递 ...

  2. HackerRank - common-child【DP】

    HackerRank - common-child[DP] 题意 给出两串长度相等的字符串,找出他们的最长公共子序列e 思路 字符串版的LCS AC代码 #include <iostream&g ...

  3. wpf利用线程制作初始界面和关闭窗体特效

    1.首先定义初始窗体,和主窗体. 初始窗体(StartWindow) 主窗体(MainWindow): 2.在主窗体界面中,加载初始窗体.注意在线程中操作UI元素需要使用BeginInvoke或者In ...

  4. Cookie应用参考

    内容来自imooc.

  5. django---ORM之Q查询

    filter 等方法中的关键字参数查询都是一起进行“AND” 的. 如果你需要执行更复杂的查询(例如OR 语句),你可以使用Q对象 调用Q from django.db.models import Q ...

  6. Maven：Eclipse上Maven的配置

    Eclipse上Maven的配置: 步骤: ①Maven下载地址: http://maven.apache.org/download.cgi# ②解压apache-maven-3.5.0-bin.zi ...

  7. 高亮显示QSS文件

    转[作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820] 简述 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示 ...

  8. Luogu-3648 [APIO2014]序列分割

    Luogu-3648 [APIO2014]序列分割 题目链接 题解: 首先要发现一个重要的性质:分割的顺序是不会影响答案的 证明: 首先对于没有交的两段区间,显然先后顺序改变不会有影响 而对于在同一段 ...

  9. share point 2013 部署

    最近工作需要,需要用share point 2013 开发项目,但是遇到了刚部署环境就遇到了不少问题.唉~ 本机部署搭建一个share point 2013 环境. 第一步:首先要下载一个vmware ...

  10. struts2——文件下载自定义文件名，包括中文

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...