`
zhanshenny
  • 浏览: 265579 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

px与em

    博客分类:
  • html
阅读更多
  px像素(Pixel)。长度单位。像素px是相对于显示器屏幕分辨率而言的。
  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会继承父级元素的字体大小。

  所以我们在写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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

答案补充

body{
font-size=12px;
}

#title{
font-siez=2.6em;
}
这里更正下
font-siez=2.6em;
应该改为font-size:2.6em;
等号应该改为冒号!这样才正确!
分享到:
评论

相关推荐

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

    #### 一、px与em的基本概念 1. **px(像素)**:是一种绝对单位,代表屏幕上的物理像素点。不同设备的屏幕分辨率不同,相同数量的像素在不同的屏幕上显示的实际大小可能不一样。 2. **em(相对单位)**:是一种相对...

    搞清楚CSS中单位px与em之间的关系和特点

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1、IE无法调整那些使用px作为单位的字体大小...

    CSS中单位px与em的区别(推荐)

    3. **IE兼容性**:在IE浏览器中,使用em单位定义的字体大小可能会与预期有所不同,特别是在处理汉字时。有时,将body选择器中的62.5%改为63%可以解决这个问题,因为IE在处理浮点数时可能存在精度误差。 4. **响应式...

    CSS3 px 和 em 和 rem

    然后,用em来处理与内容相关的尺寸,如段落的行高;最后,利用rem来实现响应式的调整,比如在小屏设备上统一缩小元素大小。 现在让我们看看提供的两个示例文件——"demo2.html"和"demo.html"。这些文件可能包含了...

    css中单位px和em的区别

    与`px`不同,`em`是一种相对单位,它的值依赖于其父元素的字体大小。具体而言,`1em`等于当前元素的字体大小。如果未指定字体大小,`em`的默认值通常等同于浏览器的默认字体大小,一般为`16px`。因此,当一个元素的`...

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

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小;...

    px、em、rem区别1

    本文将详细解析三种常见的CSS字体单位——像素(px)、em和rem的区别及其应用场景。 首先,像素(Pixel,px)是绝对长度单位,它基于显示器的物理像素。在大多数情况下,px 提供了一种稳定且可预测的布局,但有一个...

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

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...

    PX to EM-crx插件

    **像素(PX)与EM单位** 1. **像素(PX)**:像素是绝对单位,代表显示器上最小的可寻址点。在CSS中,像素常用于定义元素的精确尺寸,如宽度、高度或边距。使用像素的好处在于可以精确控制元素的显示,但缺点是在...

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

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

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

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

    js源码 - PX到EM转换器

    PX到EM转换器,这是一款使用HTML、CSS和JavaScript制作的像素到EM转换实用工具,采用Poppins字体和时尚的深色背景设计,具有渐变效果。无论您是网络开发人员微调响应式设计,该转换器都通过实时动态计算和显示转换...

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

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

    2018前端面试题与答案汇总HTML.doc

    7. px与em的区别:px是固定长度单位,不会随字体大小变化。em是相对单位,基于父元素的字体大小。1em等于父元素的字体大小,因此在不同环境下em值可能会变化。 8. 优雅降级与渐进增强:优雅降级是先创建高级功能,...

    Web前端面试题,包括HTM、CSS、JavaScript等相关题

    - **px与em**:px是固定单位,em基于父元素的字体大小,适合作为响应式设计的单位。 - **CSS Reset**:清除浏览器默认样式,如Eric Meyer Reset, Normalize.css则是规范化浏览器样式,保留基本元素的默认样式。 ...

    移动端网页字号pt px em换算对照表.pdf

    移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf

    web前端-面试题[汇编].pdf

    8. **px与em的区别**:px是固定单位,值是确定的;em是相对单位,基于父元素的字体大小,因此em的值会随着父元素字体大小改变而改变。 9. **优雅降级与渐进增强**:优雅降级策略是在设计初期就考虑完整功能,然后...

Global site tag (gtag.js) - Google Analytics