EM与PX的对应关系

公式转换——PXtoEM

如果你是第一创建弹性布局的，最好在身边准备一个计算器，因为我们一开始少不了很多的计算，有了他放心。

像素对于我们来说太密切了，因此我们也将从这开始。首先需要计算出1px和em之间的比例，然后是知道我们需要的px值。通过前面的介绍，大家都知道1em总是等于父元素的字体大小，因此我们完全可以通过下面的工式来计算：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

大家可以参考一下面这张转换表(body字体为16px时的值)

接下来我们一起看一个很简单的实例“使用CSS的EM制作一个960px宽度的弹性布局”

HTML Markup

          <body><div id="container">   …</div></body>

将960px转换为em

1 ÷ 16px × 960px = 60em

这个计算值的前提条件是<body>的“font-size:16px”。

CSS Code

              html {font-size: 100%;}body {font-size: 1em;}#container {width: 60em;}

通过上面的实例，我想大家更能形像化的理解了，因为有例可询，其实我们可以把上面的计算公式转换一下，将更方便你的计算：

需要转换的像素值 ÷ 父元素的font-size = em值

那么我们上面的实例“960px”就可以这样来转换成“em”值

960px ÷ 16px = 60em

上面我们一起见证了“px”转换成“em”的计算方式，接下来我们一起来动看制作上面展示过的弹性布局样例。下面我们主要一起来一步一步的实现他。

构建一个弹性的容器

要创建弹性布局样例那样的居中效果，我们首先需要创建一个HTML结构，我在此给创建一个<div>并且取名叫“wrap”

              <body><div id="wrap"> content here</div></body>

我们希望这个容器是一个“740px”宽，适合一个“800px × 600px”显屏的实例。那么“740px”会等于多少“em”呢？这就是我们需要关心的问题，大家一起来看吧：

1、将“740px”转换成“em”设置到我们的容器“div#wrap”：我们都知道“div#wrap”的父元素<body>设置了字体为“16px”，那么此时在没有进行另外显示的设置时，他的子元素<div id="wrap">将继承“font-size”值，这样我们就可以轻意得到：“1px和1em之间的关系”

1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em

这样一来，我们的“740px”就很容易的能转换成“em” 0.0625em × 740 = 46.25em

当然大家也可以按照我们前面所列出的计算公式来进行转换，这样你心中更具有一个概念性，也不容易弄错：

1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 需要转换的像素值 = em值)

这样一来，您可以使用上面的公式计算出您需要的任何宽度或高度的“em”值，你只需要知道“1px等于多少em”，另外就是你要转换的“px”值是多少，具备这几个参数你就能得到你想要的“em”值了。

2、创建CSS样式：现在我们可以给“div#wrap”写样式了，弹性布局样例很明显的告诉我们，给“div#wrap”设置了一个宽度为“740px”居中，带有上下“margin”为“24px”，而且带有“1px”的边框效果，那么我们首先根据上面的公式计算出相应的“em值”，然后在写到CSS样式中：

              html {font-size: 100%;}body {font-size: 1em;}#wrap {width: 46.25em;/*740px ÷ 16 = 46.25em */margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/}

现在我们就轻松的创建了一个包含内容的弹性容器：弹性布局样例。

文本样式与em

首先我们在前面那个创建的<div id="wrap"></div>中插入一个<h1>和一个<p>:

              <div id="wrap"><h1>...</h1><p>...</p></div>

在弹性布局样例实例中，我们标题使用了“18px”，而段落设置的是“12px”字体，同时其行高是“18px”。18px将是我们实现弹性布局的一个重要值，可以使用他们都按正比变化。（有关于标题和段落的排版介绍，大家感兴趣可以点击Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相关介绍）。

根据CSS继承一说，我们在“div#wrap”的内容容器中没有显式的设置字体大小，这样整个“div#wrap”将继承了其父元素“body”的字体——“16px”。

1、给段落设置样式：——“12px”的字体，“18px”的行高以及margin值

从CSS继承中，我们可以得知我们所有段落继承了其父元素“div#wrap”的“font-size:16px”。同时我们通过前面的介绍得知1px = 1 ÷ 16 = 0.0625em，这样一来我们就很轻松的知道“12px”等于多少个“em”

0.0625em × 12 = 0.750em

这样我们就可以给段落p设置样式：

p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

要计算出段落所需的行高和“margin”为“18px”，来满足Richard Rutter说的basic leading，那我们就需要像下面的方法和来计算：

18 ÷ 12 = 1.5em

使用所需的行高值“18px”直接除以“字体大小12px”，这样就得到了段落“p”的“line-height”值。在本例中行高就等于字体的“1.5”倍，接着我们把“line-height”和“margin”样式加到段落“p”中

              p{font-size: 0.75em;/*0.625em × 12 = 0.750em */line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */}

2、给标题设置一个18px的字号

标题“h1”和段落“p”一样的原理，他也是继承他父元素“div#wrap”的“16px”的“font-size”，所以我们也是按同样的方法可以计处出他的“em”

0.0625em × 18 = 1.125em

我们可以把得出的值写到CSS样式表中

              h1 {font-size: 1.125em;/*0.625em × 18 = 1.125em*/}

同样为了保留Richard Rutter所说的vertical rhythm，我们同样将标题“h1”的“line-height”和“margin”都设置为“18px”，使用方法前面介绍的方法。很容易得到他们的“em”值为“1em”:

              h1 {font-size: 1.125em; /*0.625em × 18 = 1.125em*/line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */}

EM与PX的对应关系相关推荐

HTML中将px转换为em的语法,在JavaScript中转换EM为PX（并获得默认字体大小）
CommunityChannel72提出了一个问题:Converting em to px in Javascript (and getting default font size),或许与您遇到的问 ...
CSS em与px区别-CSS教程
在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...
CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置 ...
word中字体大小（pt）与网页中css设置font-size时用的px大小对应关系
word中字体大小(pt)与网页中css设置font-size时用的px大小对应关系 pt与px转换关系为 1px= 0.75pt. 所以word中五号字体(10.5pt)在网页中对应的font-si ...
学习CSS了解单位em和px的区别
这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚 px与em之间的关系和特点,看过以后确实 ...
CSS中em和px单位的区别(转)
这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收 ...
css:学习CSS了解单位em和px的区别
在国内网站中,包括三大门户,以及"引领"中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而在大洋彼岸,几乎所有的主流站点都使用 ...
css中em与px的介绍及换算方法
em是什么? em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font -size的 ...
chrome控制台如何把vw显示成px_【CSS】rem，em，px的区别和使用场景
前端潮咖点击上面蓝字,关注我们! 关注关注前端潮咖,每日精选好文作者:大前端小菜鸟来源:cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/v ...

EM与PX的对应关系

EM与PX的对应关系相关推荐

最新文章

热门文章