Home > Web Front-end > HTML Tutorial > [CSS3 tutorial] Detailed explanation of relative unit rem_html/css_WEB-ITnose

[CSS3 tutorial] Detailed explanation of relative unit rem_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:50:04
Original
1554 people have browsed it

作者:zhanhailiang 日期:2015-01-28
Copy after login

定义

CSS3新增了一个相对单位rem,其官方定义如下:

font size of the root element

rem,em,px单位的区别

rem单位和em单位都是相对大小,px是绝对大小。其区别在

  1. em基于当前元素的(如果没设置就是继承其父元素的)font-size,这样会出现一些组合问题;
  2. rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;

兼容性说明

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

示例

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>    /*浏览器默认font-size:16px;*/    /*%单位对于font-size、line-height等,是基于其父元素的font-size;*/    /*16px * 312.5% = 50px;*/    html{font-size: 312.5%;}    /*50px * 0.5 = 25px; IE8及之前版本使用*/    body{font-size: 0.5rem; font-size\0:25px;}    /*50px * 0.25 = 12px; IE8及之前版本使用*/    p{font-size: 0.25rem; font-size\0:12px;}    </style></head><body>浏览器默认font-size:16px;<p>    浏览器默认font-size:16px;</p></body>
Copy after login

更多阅读

  1. (W3C)EM, PX, PT, CM, IN…
  2. 理解css中的长度单位
  3. CSS3教程:相对单位rem详解
  4. IE8 HACK介绍
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template