`
xiaqi
  • 浏览: 1768 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

css中em与px的介绍及换算方法

    博客分类:
  • CSS
阅读更多
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。
分享到:
评论

相关推荐

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

    为了简化这种换算,可以在CSS中将body元素的字体大小设置为62.5%(即16px * 62.5% = 10px),这样1em就相当于10px,便于将px值转换为em。 然而,这样做并非没有问题。由于em的继承性,如果你在content div中设置了...

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

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

    CSS3 px 和 em 和 rem

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

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

    之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来...为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只

    CSS px,rem关系转换换算

    懒人推动进步,简化px,em,rem的换算

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

    在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,css的em属性学习全攻略.pdf

    【CSS中的EM单位详解】 EM单位在CSS中是一种非常强大的相对单位,它的主要特点是基于父元素的字体大小来计算元素的尺寸。这篇文章将深入探讨EM单位的使用,以及如何利用它构建灵活的弹性布局。 首先,我们要理解...

    前端开源库-postcss-px2rem

    `postcss-px2rem` 是一个非常实用的开源库,它是基于 PostCSS 的插件,主要用于将 CSS 文件中的像素单位(px)自动转换为相对单位(rem)。PostCSS 是一个工具,它允许开发者通过编写自定义的JavaScript 插件来处理...

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

    1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...

    使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果

    在项目中安装`postcss-px2rem`后,只需配置相应的转换规则,如转换阈值、保留的小数位数等,即可在构建过程中自动完成px到rem的转换。 接下来,我们需要在HTML的根元素`<html>`中设置`font-size`。这是因为`rem`...

    CSS Font-Size: em、px 、pt 、Percent之间的关系及换算

    在CSS中设置字体大小时,开发者经常遇到四种单位:em、px、pt和百分比(%)。这些单位在使用时各有特点和适用场景,下面详细解释它们之间的关系及换算方式。 首先,"em"是一个相对单位,它基于当前元素的字体大小。...

    postcss-pxtorem:使用PostCSS将像素单位转换为rem(根em)单位

    postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...

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

    在CSS布局和样式设计中,理解像素(px)和em单位的区别是非常重要的,因为它们直接影响到网页的可读性和响应性。下面将详细解释px和em单位,并探讨它们在实际应用中的差异。 首先,像素(px)是绝对单位,代表显示器上...

    Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    本文将详细介绍如何使用Vue CLI3进行移动端适配,主要涉及两种方法:`lib-flexible` 和 `postcss-plugin-px2rem`。 首先,确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...

    一款px转换rem工具

    在前端开发中,像素(px)是常用的布局单位,但为了实现响应式设计,开发者往往需要将像素值转换为相对单位,如rem(root em)。rem单位与根元素(通常是html元素)的字体大小相关联,允许页面元素的尺寸根据屏幕...

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

    为了简化font-size的换算,我们可以在css中的body选择器中声明font-size= 62.5%,这就使em值变为16px*62.5% = 10px。 四、rem rem是相对单位,相对的只是HTML根元素font-size的值。如果想要简化font-size的转化,...

Global site tag (gtag.js) - Google Analytics