`

CSS中px和em的区别

    博客分类:
  • CSS
阅读更多

在设计页面字体的时候,我们通常选择的是px而不是em。在国内,无论是哪种类型的网站,大到新浪、搜狐小到一些个人站点都是这么做的。不为别的,就是因为他易用。而国外的网站则基本上都采用em作为字体的单位,他们考虑到的是网站的可扩展性。这样一来,网站的维护也就相对简单些。要改大或改小某些字体就不会影响到页面的整体布局。前者就很有可能出项布局错乱的现象。

文字的单位建议用px,块与块之间的单位用px。

首先,em不是固定的,它会继承父级元素的字体大小。雅虎的Yahoo fonts CSS 建议字体大小都用%表示,他们提供了一张px和%相互转换的表:

  • 10px => 77%
  • 11px => 85%
  • 12px => 93% (was 93)
  • 13px => 100%
  • 14px => 108% (was 107)
  • 15px => 116% (was 114)
  • 16px => 123.1% (was 122)
  • 17px => 131% (was 129)
  • 18px => 138.5% (was 136)
  • 19px => 146.5% (was 144)
  • 20px => 153.9% (was 152)
  • 21px => 161.6% (was 159)
  • 22px => 167%
  • 23px => 174%
  • 24px => 182%
  • 25px => 189%
  • 26px => 197%
分享到:
评论

相关推荐

    css中单位px和em的区别

    css中单位px和em的区别

    CSS3 px 和 em 和 rem

    NULL 博文链接:https://onestopweb.iteye.com/blog/2318759

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

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

    css中px、em和rem的区别总结

    相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。

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

    字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px ...

    CSS中px em rem区别与使用

    本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧

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

    在使用弹性布局的时候,经常会遇到px值转换成em值,所以做了一张表,把常用的px和em值列出来,方便打印,提高效率。

    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与em的区别(推荐)

    主要介绍了CSS中单位px与em的区别 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

    概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),

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

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

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

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

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

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

    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=...

    px、em、rem区别1

    为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样1

    css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算...

Global site tag (gtag.js) - Google Analytics