`
FengShen_Xia
  • 浏览: 279412 次
  • 性别: Icon_minigender_1
  • 来自: 东方水城
社区版块
存档分类
最新评论

em和px

    博客分类:
  • Jsp
阅读更多

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。

评论

相关推荐

    学习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