`
jamm19860411
  • 浏览: 86622 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论
阅读更多
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。
分享到:
评论

相关推荐

    FF下zoom的替代方案 单位em

    首先是em的计算方式,当本元素和父级元素没有指定以em或者...CSS单位em span{ font-size:16px; } .domain{ padding:15px; } 正常的1em=16px style=”font-size:2em;border:solid 1px red;” 这里1em=2×16=32px

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

    2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。...

    CSS 字体单位em简介

    国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位.

    Web-前端html+css从入门到精通 205. vw单位进行动态fontsize设置.zip

    /* 当视口宽度小于600px时,改为相对单位em */ } } ``` 这样,当屏幕宽度小于600px时,字体大小会根据em单位来计算,以保持一定的可读性。 此外,vw单位不仅可以用于font-size,还可以用于其他长度属性,如width...

    完美实现响应式em

    "完美实现响应式em"这个标题强调了使用em单位来实现这一目标。em是一种相对单位,基于父元素的字体大小,使得布局更加灵活,更适合响应式设计。 1. **em单位介绍**: em单位是一个相对于当前元素字体大小的长度...

    css中单位px和em的区别

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

    textarea自适应高度插件textareaAutoHeight.zip

    检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效.1. 加载jQuery库(1.4 )2. 加载textareaAutoHeight.js3. 使用以下接口调用插件:$('textarea').tah({ ...

    浅析CSS中单位px、rem、em、vh、vw之间的区别

    3. **相对长度单位em**: EM单位相对于当前元素的font-size,而不是根元素。默认情况下,1em也等于16px,但与rem不同的是,em的值可以由元素自身或其父元素的font-size决定。如果在某个元素上设置font-size为32px,...

    javascript 网页

    3. **单位em的作用**:这里使用的em单位是一种相对单位,1em默认等于元素当前的字体大小。因此,0.875em、1em和1.125em分别相当于大约14px、16px和18px(基于默认的16px基准)。使用em单位可以确保字体大小随屏幕...

    EM235使用说明.doc

    EM235模块是西门子S7-200系列PLC中的一款模拟量输入模块,用于处理工业环境中的模拟量信号。本使用说明详细介绍了如何配置和操作该模块,以便于用户在自动化系统中有效集成和处理模拟量数据。 1. **概述** EM235...

    EM1300集成手册,单片机串口连接

    - **V1.2.3** (2011-10-24): 对综合设置章节中识读模式部分的相关时长设置单位进行了详细描述,方便用户根据实际需求调整设置。 - **V1.2.4** (2012-03-05): 修改了部分码的校验默认值,增强了数据的准确性。 - **V...

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

    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕...

    《响应式Web设计实践》试读干货.

    像素(px)、相对长度单位em以及更现代的rem单位都是设定字体大小的常用方法。em单位与父元素的字体大小相关联,而rem单位则是相对于根元素(html)的字体大小。 后代选择器是CSS中的一种选择器,用于选取某个元素...

    字体是网页设计中最重要的细节.pdf

    为了保证用户体验的一致性,字体大小通常也会使用相对单位em来设置,而不是绝对单位px。使用em作为单位意味着字体大小会根据父元素的大小按比例缩放,这有利于创建响应式设计。 在讨论字体时,我们还需要考虑屏幕...

    CSS3 px 和 em 和 rem

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

Global site tag (gtag.js) - Google Analytics