css3 使用新的字体单位rem

网页要多终端匹配，传统字体单位px满足不了，考虑使用rem单位

rem 是相对于根节点的

为此，如下代码，先让根节点单位为10px，之后就方便使用rem了

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

非常好的是，rem ie9支持

如要兼容ie9以下浏览器，可

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

demo:xx这里

时间： 2024-09-29 23:41:10

css3 使用新的字体单位rem的相关文章

[CSS3教程]相对单位rem详解

作者:zhanhailiang 日期:2015-01-28 定义 CSS3新增了一个相对单位rem,其官方定义如下: font size of the root element rem,em,px单位的区别 rem单位和em单位都是相对大小,px是绝对大小.其区别在 em基于当前元素的(如果没设置就是继承其父元素的)font-size,这样会出现一些组合问题: rem则是只相对于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可: 兼

CSS 天坑 I - 字体单位

首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不会自动调节不能适应各类设备屏幕尺寸自然不会产生任何尺寸变化的问题.相反地,要为不同设备上的用户提供最好的阅读或使用体验我们不可避免的就是对元素或字体的尺寸的测量与控制.由其是字体的尺寸,不知道你是否有以下的经历 同样的一个网页,同一份样式表,但: 字体在mac 上很漂亮,但在windows很难看 ?

css 相对单位rem详解

CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应.目前,除了IE8及更早版本外,所有浏览器均已支持rem.对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定的字体大小.

CSS -- 字体单位（px、em、rem）

web页面常用记量单位:px.em.rem: 任意浏览器的默认字体都是16px.所有未经调整的浏览器都符合: 16px = 1em = 1rem. ==>在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认渲染字体.此时我们Web页面中的<body>就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置<body>的“font-size”值,来改变其继承的值. 1.px / em / rem 区别.优缺点 px:相对长度单位 -- 绝对值

css3中单位rem与.less结合布局

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. 通常的,我们把html的font-size设置成0.625%;因为浏览器默认的字体大小是16px,所以font-size:0.625也就相当于16px*0.625=10px;往后我们要设置字体大小的时候,就可以用rem了.例如font-size:1.2rem; 就相当于 font-size:12px

px,em,rem字体单位

1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字体高都是16px,默认识别最小字体12px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px,

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

CSS尺寸和字体单位-em、px还是%

在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性:甚至在当下访问终端 (iPhone.iPad.PC.Android…)层出不穷的今天,适应各式各样的访问终端,将成为手中的一块“烫手的山芋”.所以在近几年,“九宫 格”式的“流式布局”再度回归.为了提供页面布局,及其它的可维护性.可扩展性,我们尝试

css字体单位

今天我们就来看一下css中的字体单位.或者你会说,不看不知道,一看吓一跳,原来css有那么多的字体单位啊,虽然有一些我们很少用,或者说没用过,但,,,它就在那里.一起去看一看吧. css中的字体单位主要分为两种类型:绝对长度单位和相对长度单位. 1.绝对长度单位:所谓绝对长度单位就是说它是一个固定值,它反映的是一个实实在在的物理尺寸,说多大就是多大,绝对长度单位不依赖于环境(显示器.分辨率.操作系统等.绝对长度单位分为以下几种: cm:厘米   mm:毫米 in:英寸(1in = 96px =7