`
fumi520
  • 浏览: 13938 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

em和px

阅读更多
字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

em是何物?
em指字体高,任意浏览器的默认字体高都是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会继承父级元素的字体大小。

重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗?
本现象只发生在12px的汉字,英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css,看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

还可以做哪些改进

为什么还需改进:
1. 你的网站css过于复杂,以至于不知道元素的从属关系,很难重写css;
2. 绝大部分人看了本文之后仍然不会重写css;
3. 很大部分人不知道浏览器可以调整页面的字体大小。

所以你需要一个诸如本站信息框中的字体大小调整控件。

转载自:http://uitony.com/?p=35
分享到:
评论

相关推荐

    学习CSS了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS...3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

    em是何物 em与px的介绍及换算方法

    在网页设计和CSS布局中,em和px是两种常见的长度单位。它们各有特性和用途,理解它们的区别和换算方式对于创建响应式和灵活的网页布局至关重要。 首先,em单位代表的是相对于当前元素的字体大小的单位。在大部分...

    CSS3 px 和 em 和 rem

    本文将深入探讨CSS3中的单位px、em和rem,它们都是用来定义元素尺寸的重要工具,但各有其特点和应用场景。 首先,我们要理解像素(px)单位。像素是屏幕上的最小显示单位,通常用于创建精确的布局。当你设置一个...

    浅析rem和em和px vh vw和% 移动端长度单位

    移动端开发中的长度单位主要有以下几种:px、em、rem、vh、vw和%。它们各自的特点和用途不同,在移动端开发中扮演着重要的角色。 首先来聊聊em单位。em是一个相对单位,它指的是当前字体的字号大小。浏览器默认字体...

    em px的关系

    本文将重点探讨CSS中两种常见的长度单位——em和px,它们之间的关系以及如何在实际项目中合理运用。 #### em与px的概念 1. **em单位**:em是一种相对单位,它的值取决于其父元素的字体大小。例如,如果一个元素的...

    css中单位px和em的区别

    在众多单位中,`px`(像素)和`em`是两种最常见的长度单位,它们各自拥有独特的特性和应用场景,理解它们之间的区别对前端开发者来说尤为重要。 ### `px`单位解析 `px`,全称为pixel,中文翻译为“像素”,是最...

    前端大厂最新面试题-em_px_rem_vh_vw.docx

    前端大厂最新面试题-em_px_rem_vh_vw 以下是对前端大厂最新面试题-em_px_rem_vh_vw的知识点详细解释: 一、单位的概念 在CSS中,单位可以分为长度单位和绝对单位。长度单位可以进一步分为相对长度单位和绝对长度...

    CSS 弹性布局 px和em值转换表

    ### CSS 弹性布局 px和em值转换表详解 在前端开发中,特别是在CSS布局设计时,经常需要用到单位之间的转换,比如将像素单位(px)转换为相对单位(em)。这样的转换有助于实现响应式布局和更灵活的设计。本文将详细介绍...

    css中em px 区别你真的了解吗

    综上所述,px和em单位在网页设计中各有利弊。在设计网页时,需要根据具体的布局需求、浏览器兼容性以及用户体验等因素,合理选择使用px或em单位。一般来说,在需要确保字体大小和布局精度的情况下,使用px单位较为...

    css中的px、em、rem、pt 特点和区别及换算详解

    在CSS中,像素(px)、em、rem和pt是四种常用的长度单位,它们各自具有不同的特点和用途。了解这些单位的特点和区别对于创建响应式和适应不同设备的网页设计至关重要。 1. **像素(px)**: 像素是CSS中最基本的...

    px、em、rem区别1

    对于那些需要兼顾老版本浏览器的项目,可以结合使用px和em,确保在不支持rem的浏览器中仍能正常显示。 在实际应用中,可以这样编写CSS样式: ```css body { font-size: 62.5%; /* 将1em转换为10px */ } p { font...

    知识普及:彻底搞懂CSS中单位px和em,rem的区别

    3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本...

    em-px:在PX中转换EM的模块

    em-px 在PX中转换EM的模块。 安装 $ [sudo] npm install --save em-px 用法 var emPx = require ( 'em-px' ) ; emPx ( 0.667 , 24 , true ) . then ( function ( px ) { console . log ( px ) ; // 16px } ) . ...

    CSS的em、px、pt长度单位转换示例

    1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=0.75pt 1pt=1/12 em≈0.0833em 1pt=4/3 px≈1.3333px em、px、pt的转换工具如下,结果如无法除尽,小数点后面四舍五入到4位,我用“约等于”表示;如果可以除尽...

    关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip屏幕自适应

    - "HTML5用rem来做响应式开发代替px和百分比.txt"提倡在HTML5项目中使用rem,以增强页面的响应性和可维护性。 **六、工具与计算** - "px转rem工具.url"提供了在线工具,帮助开发者快速转换像素值到rem,简化计算...

    css中的长度单位(em/ex/px/pt)使用介绍

    本文将详细介绍四种常用的CSS长度单位:em、ex、px和pt。 首先,em单位是基于当前字体的大小,通常用于响应式设计中。1em等于当前字体的font-size值。例如,如果一个元素的font-size被设置为20px,那么在这个元素中...

    CSS 中px、em、rem、%、vw、vh单位之间的区别详解

    本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位,它基于屏幕的物理分辨率。1px表示设备上的一点,通常用于创建精确的图形或保持元素大小恒定。由于px是...

    PX4-Autopilot.zip

    git clone https://github.com/PX4/PX4-Autopilot.git --recursive 由于外网原因克隆PX4源码不完整(各子项目库下载不齐全)的可下载此PX4源码完整版

Global site tag (gtag.js) - Google Analytics