这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与 em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
分享到:
相关推荐
本文将深入探讨CSS3中的单位px、em和rem,它们都是用来定义元素尺寸的重要工具,但各有其特点和应用场景。 首先,我们要理解像素(px)单位。像素是屏幕上的最小显示单位,通常用于创建精确的布局。当你设置一个...
在前端开发中,特别是在CSS布局设计时,经常需要用到单位之间的转换,比如将像素单位(px)转换为相对单位(em)。这样的转换有助于实现响应式布局和更灵活的设计。本文将详细介绍如何进行px到em的转换,并解释给出的...
为了简化这种换算,可以在CSS中将body元素的字体大小设置为62.5%(即16px * 62.5% = 10px),这样1em就相当于10px,便于将px值转换为em。 然而,这样做并非没有问题。由于em的继承性,如果你在content div中设置了...
之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来...为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只
懒人推动进步,简化px,em,rem的换算
在IE6.0字体设定为中的时候,如果字体未做任何CSS设定或者元素的设定,默认的字体是12pt,或者16px,或者1em,或者font size=3。em、px、pt的换算关系如下: 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=...
【CSS中的EM单位详解】 EM单位在CSS中是一种非常强大的相对单位,它的主要特点是基于父元素的字体大小来计算元素的尺寸。这篇文章将深入探讨EM单位的使用,以及如何利用它构建灵活的弹性布局。 首先,我们要理解...
`postcss-px2rem` 是一个非常实用的开源库,它是基于 PostCSS 的插件,主要用于将 CSS 文件中的像素单位(px)自动转换为相对单位(rem)。PostCSS 是一个工具,它允许开发者通过编写自定义的JavaScript 插件来处理...
postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
在项目中安装`postcss-px2rem`后,只需配置相应的转换规则,如转换阈值、保留的小数位数等,即可在构建过程中自动完成px到rem的转换。 接下来,我们需要在HTML的根元素`<html>`中设置`font-size`。这是因为`rem`...
在CSS布局和样式设计中,理解像素(px)和em单位的区别是非常重要的,因为它们直接影响到网页的可读性和响应性。下面将详细解释px和em单位,并探讨它们在实际应用中的差异。 首先,像素(px)是绝对单位,代表显示器上...
1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...
而`px2rem-loader`和`postcss-plugin-px2rem`则是在编译阶段自动将CSS中的px转换为rem,简化开发者工作。 需要注意的是,当使用预处理语言时,`px2rem-loader`可能无法处理嵌套规则或某些特定情况,这时`postcss-...
在CSS中设置字体大小时,开发者经常遇到四种单位:em、px、pt和百分比(%)。这些单位在使用时各有特点和适用场景,下面详细解释它们之间的关系及换算方式。 首先,"em"是一个相对单位,它基于当前元素的字体大小。...
在前端开发中,像素(px)是常用的布局单位,但为了实现响应式设计,开发者往往需要将像素值转换为相对单位,如rem(root em)。rem单位与根元素(通常是html元素)的字体大小相关联,允许页面元素的尺寸根据屏幕...
为了简化font-size的换算,我们可以在css中的body选择器中声明font-size= 62.5%,这就使em值变为16px*62.5% = 10px。 四、rem rem是相对单位,相对的只是HTML根元素font-size的值。如果想要简化font-size的转化,...
CSS 2.0 提供了多种长度单位,如像素(px)、百分比(%)、em、rem等。相对单位允许元素尺寸随其父元素或字体大小变化,而绝对单位则固定在特定的物理尺寸。 ### 6. 浮动与清除 - **浮动**: `float` 属性允许元素...