浅谈px,em与rem

Yujiaao 发布于2019-08-29 12:25 / 3358人阅读

摘要：关于表示像素计算机屏幕上的一个点，是绝对单位，不会因为其他元素的尺寸变化而变化关于任意浏览器的默认字体高都是。有如下特点的值并不是固定的会继承父级元素的字体大小。避免字体大小的重复声明。所有未经调整的浏览器都符合。

关于px

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化

关于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。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合1em=16px。
在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px;12px就等于1.2em

关于rem

css3新增了相对单位 rem (IE8及以下不支持该单位),使用rem同em一样皆为相对字体大小单位，不同的是rem相对的是HTML根元素.
常见的用法：
html {font-size: 62.5%;/10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem;/1.4 × 10px = 14px /}
h1 { font-size: 2.4rem;/2.4 × 10px = 24px/}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111880.html

浅谈<em>pxem>,em与rem

摘要：关于表示像素计算机屏幕上的一个点，是绝对单位，不会因为其他元素的尺寸变化而变化关于任意浏览器的默认字体高都是。有如下特点的值并不是固定的会继承父级元素的字体大小。避免字体大小的重复声明。所有未经调整的浏览器都符合。关于px px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化关于em 任意浏览器的默认字体高都是16px。所...

econi 2019-08-01 16:39 评论0 收藏0
移动web开发浅谈之那些我们需要知道的基础

摘要：正文概念本次要谈的移动不是，只是很普通的移动端的界面。默认行为作为之前开发端的人员，第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。前言开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没...

stackfing 2019-08-29 11:02 评论0 收藏0
浅谈CSS calc()函数的用法

摘要：为什么是如果你使用过预处理器，比如，以上示例你或许碰到过然而，函数提供了更好的解决方案。当使用预处理器做数学运算时，给定值为表达式的结果。使用函数可以用来对数值属性执行四则运算。函数的计算值如下所示降级方案已经得到普遍支持。 CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { w...

leeon 2019-08-30 11:04 评论0 收藏0
浅谈CSS calc()函数的用法

摘要：为什么是如果你使用过预处理器，比如，以上示例你或许碰到过然而，函数提供了更好的解决方案。当使用预处理器做数学运算时，给定值为表达式的结果。使用函数可以用来对数值属性执行四则运算。函数的计算值如下所示降级方案已经得到普遍支持。 CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { w...

nidaye 2019-08-02 15:14 评论0 收藏0
浅谈CSS calc()函数的用法

摘要：为什么是如果你使用过预处理器，比如，以上示例你或许碰到过然而，函数提供了更好的解决方案。当使用预处理器做数学运算时，给定值为表达式的结果。使用函数可以用来对数值属性执行四则运算。函数的计算值如下所示降级方案已经得到普遍支持。 CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { w...

jackwang 2019-08-23 17:57 评论0 收藏0