为什么 CSS 字号设置为 8px，在 IE、火狐、Chrome 下显示的差别很大呢？设置字体什么时候用 em、什么时候用 px 合适？
因为只给了jpg格式设计稿，字体大小我是通过量高度确认的。用的单位是px，感觉在ie,或者火狐下，比例是正常的。但是貌似看起来很小。在chrome下看起来正常，但是比例不对。实在是不解。这三个浏览器对px的处理难道不一样吗？可是设置盒子的宽度什么的又都差不多啊
按投票排序
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: 解决.至于 em 单位, 因为其是相对单位, 所以在某些情况下会更具便利性. 但如果你是为了一些教程中声称的使用 em 可以利于网页缩放, 那就没有使用它的必要了, 因为早已经不存在这个问题了.
有字体最小值的限制吧，更可气的是，这个值貌似用户还可以自己设置。如果实在对于字体大小特别敏感，直接用图片吧。CSS长度单位 px和pt的区别
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。
这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个&点&有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为&分辨率高&，反之，就是&分辨率低&。所以，&点&的大小是会&变&的，也称为&相对长度&。
pt全称为point，但中文不叫&点&，查金山词霸可以看到，确切的说法是一个专用的印刷单位&磅&，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为&绝对长度&。
因此就有这样的说法，在网页设计中，pixel是相对大小，而point是绝对大小。
但这种说法其实还是有问题，先来看看下面的例子： 看出什么名堂了么？
72px要比72pt小一些，但96px正好和72pt一样大小
让我们来调整电脑的设置：在桌面上右键 & 属性 & settings & Advanced & General & DPI setting & 96 DPI。
试着改变设置，设为72DPI，重启，再打开浏览器看：72px已经等同于72pt了。为什么？
还是再做个实验：分别用800&600和看刚才的例子，明显高分辨率下，文字就变小。而且，关键的是，无论用px还是pt，都会变小。pt并没有如有些人所说，是&绝对&的，&固定&的。
但如果用打印机把这页面打印出来，就可以看到：无论屏幕用什么分辨率，打印出来大小都是一样的（这是当然的）。
首先要分清&屏幕效果&和&打印效果&这两个概念。
在浏览网页过程中，所有的&大&&小&概念，都是基于&屏幕&这个&界面&上。&屏幕&上的各种信息，包括文字、图片、表格等等，都会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800&600分辨率下，要占屏幕宽度的1/8，但在下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变&小&（自然长度单位），甚至会看不清，影响浏览。
那是不是用pt做单位就没这样的问题呢？错！问题同样出现。刚才的例子已经很清楚的说明，在不同分辨率下，无论是px还是pt，都会改变大小 。以现在的电脑屏幕情况，还没有一种单位可以保证，在不同分辨率下，一个文字大小可以&固定不变&。因为这很难以实现也不是很有必要：全球电脑用户以亿来数，屏幕从14寸到40寸甚至更高都有，屏幕大小不同，分辨率也不同，要保证一个字体在所有用户面前大小一样，实在是MISSION IMPOSSIBLE。另外，电脑有其自身的调节性，用户可以自己来调节：1）在浏览器中调节字体大小；2）在刚才提到的显示属性里调节。
那在页面设计中到底是用px还是pt呢？
我认为，这个并没有什么原则性差异，就看自己处于什么角度思考了。
Mac机怎么情况不清楚，在Windows里，默认的显示设置中，把文字定义为96DPI（PPI，微软都将DPI和PPI混为一体，我们也就无须较真了）。这样的定义，说明了：1px＝1/96英寸。联系pt的概念，1pt＝1/72英寸，可以得出，在这样的设置中，1px＝0.75pt，常见的宋体9pt＝12px。在显示器分辨率不变的基础上（比如现在常用的），1px大小也就固定不变，改变显示设置，调整为144DPI，可以得出，1px＝0.5pt，常见的宋体9pt＝18px。原先用12px来组成的一个文字，现在需要18px来组成，px多了，文字就&大&了，更易阅读了。
所以，px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。
（附公式：px = pt * DPI / 72)
对了，刚才还提到改变浏览器中文字大小的选项，也可以改变网页的文字大小。但在这种情况下，使用px和pt都是无效的，因为这2个都是有实际&pixel&数值的单位，比如9pt是12px，大小固定。这里要引用新的单位：em，其实就是％。因为当网页中的字体没有给出实际的px或pt定义的话，会有一个默认值：12pt即16px，对应浏览器中&字体大小&中的&中等&，以这个为标准，变大或缩小。（只适用于IE，在FF中，即便定义px或pt也都可以变大变小）
所以，从这个概念上看，em才是真正的&相对单位&（百分比嘛，当然是相对），而px和pt都是绝对单位（都有固定值）。
在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示，算是绕了个圈子。参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在HTML中，默认的单位就是px，是不是也暗示着px是网页设计的&内定单位&？
但在Word或Photoshop中，使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用&宋体 9pt&，标题用&黑体 16pt&等等，无论电脑怎么设置，打印出来永远就是这么大。又或者在Photoshop中，设置一个图片中的某个艺术效果的字体是72pt大小，然后分别将这张图片设为300DPI和72DPI，再打印出来，就可以看出，这2个字体大小完全一样，只是&清晰度&不同，300DPI更清晰。这是毫无疑问的结果。
最后整理一下所有出现过的单位：
px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；
pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；
em：即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。
PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了&清晰度&，&精度&
（后记，今后的发展趋势，传统的CRT显示器将被LCD淘汰，而LCD有个特点就是分辨率固定，而不像CRT那样，一个17寸CRT可以有从640&480到不等，但17寸LCD只有这样一个标准分辨率，也是最大分辨率，而且占满屏幕，不会像CRT那样四周留黑边，要靠人工调节。因此以后一台电脑看网页，效果可以保持相对稳定。由于技术的发展，LCD的&精度&也越来越高，先来计算一下LCD的&精度&（PPI，DPI）：
15寸LCD是分辨率，对角线长为15寸（英寸），根据勾股定理，很容易可以算出，屏幕宽度是11.55英寸，再用1024来除，得出15寸LCD是88.68DPI，其余的同理，看数据：
15&(): 88.68 DPI
17&(): 96.42 DPI
19&(): 86.27 DPI; 19&W(): 89.37 DPI
20&(): 103.92 DPI; 20&W(): 99.06 DPI
22&W(): 90.05 DPI
24&W(): 94.34 DPI
以前普通15寸CRT在800&600分辨率下，大约是72DPI。让我们来算算最常用的&宋体 9pt（12px）&，在各种显示器下，实际可视大小是多少：
15&CRT(800*600): 12/72=0.167英寸，大约是4.2毫米，是很大很容易辨识的，这也是为什么前几年最流行的中文字体大小
LCD: 15&: 0.135英寸，17&: 0.124英寸，19&: 0.139英寸，19&W: 0.134英寸，20&: 0.115英寸，20&W: 0.121英寸，22&W: 0.133英寸，24&W: 0.127英寸
基本上，小于0.13英寸，对于视力不太好的或者年老的用户，就会有阅读困难，小于0.12英寸，即便一般用户也会感觉吃力。所以，一般在这种情况下，要么使用16px以上的字体大小，如果还是要9pt，那就改变显示属性，间接来改变到16px以上也一样。
再看看PDA上情况，Dell有款x50v，分辨率640&480，屏幕大小为3.7寸，可以推算出，这个屏幕是惊人的224.70DPI，高的可怕，12px的字在里面几乎是难以辨认，因此换有另一种规格的字体来专门适合这些高分辨率的场合，同时这样的字体更显得清晰圆滑，接近于传统印刷。
相信不久的将来，桌面电脑系统也会如此，让我们浏览网页也能像翻阅杂志那样精美细致、赏心悦目。响应式网页设计:rem设置网页字体大小自适应_CSS教程_前端技术
您的位置： &
& 详细内容
文章简介：响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。
首先简单科普一下什么是响应式网页。响应式网页是指会根据输出设备的分辨率不同，而自动调整布局的网页。同时，在输出设备分辨率改变时，也能及时自动调整。说穿了，就是三个字：自适应。
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是
Web 的初衷。
当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。
网页中常用的文字大小单位是 px(Pixels)，em，现在《CSS Values
and Units Module Level 3》中新增了 rem 这个单位。
相关文章：CSS3教程:相对单位rem详解
一、那到底什么是 rem 呢？
规范中明确写道：
Equal to the computed value of &font-size& on the root
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome
他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？
太好了，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。
可是，W3C 那些家伙为什么要闲着下面疼的新增这样一个单位呢？它和 em 有啥区别呢？
我们知道 em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的
font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12&16=0.75（rem）
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入&CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html
的默认 font-size=10px 不就好计算了嘛！Like this：
html{font-size:62.5%; /* 10&16=62.5% */} body{font-size:12font-size:1.2 /* 12&10=1.2 */} p{font-size:14font-size:1.4}
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px
值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的&font-size:100%，还是设置为&font-size:62.5%，如果你引入了 CSS
预处理工具那么自然可以使用默认值，如果由于其他原因使用&font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认
font-size。
二、为啥要用 rem 呢？
黑夜给了我黑色的眼睛，我将用它寻找关怀。
浏览器中用户都是可以自定义默认的文字大小的，如果使用
px，用户自行在浏览器设置中改变了文字大小后，网页上是不会变化的。我们不能排除视障用户（如近视）、老年用户不会这么做，作为一个具有「人文关怀」的前端，我们完全可以考虑这些情况。由其是在引入了
CSS预处理工具之后，这几乎不会增加什么成本。
也再次印证前面提到的：响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。
各个浏览器的设置方法如下：
&IE浏览器：按下 Alt 键，打开菜单栏&查看&字体大小
Chrome 浏览器：设置&显示高级设置&网页内容
Firefox 浏览器：按下 Alt 键，打开菜单栏&工具&选项&内容选项卡
其他浏览器就不一一举例了&&
三、什么时候用 rem？
既然 rem 的可用性更好，是不是在所有地方都去使用呢？别捉急，通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem
可能会导致布局错位，比如这样一个回顶部的按钮：
所以，什么时候用 rem，如何用好 rem？ 这也需要你拿出 18K的黑色乌金睛来照亮整个页面。让我们一起：
抛开布局，响应文字；抛开成见，响应内心。
在面对响应式开发的时候，什么才是合适的，什么是不合适的，你真的想好了吗？
( 10:56:43)
( 10:54:54)
( 11:04:04)
( 02:44:12)
( 13:06:47)
( 13:06:29)
相关排行总榜&&>>&&&&>>&&CSS中的字体大小单位：px/em/rem本文介绍下CSS中的字体大小font-size的单位：px/em/rem/%。1.px:Pixels 像素像素是屏幕的最小单位，是个绝对单位，是个可以精确确定位置和字体大小的单位，看起来是个不错的方案，但在CSS中以px为字体单位存在一个问题，：在Ctrl+滚动鼠标中轮（或者键盘上的+或者-）缩放页面的时候，遇到麻烦，简单的说，对视口比较小的移动浏览器不友好。所以，尽量避免用px作为font-size的单位吧，至少从现在开始。2.em：elementem是个相对单位，基本上所有浏览器的基准字体大小是16px，这时候，1em=16如果想设置字体大小是14px，那么，14/16=0.875，也就是0.875em,下面是一张常用的对比表：为了减少计算的麻烦，我们可以在CSS中为页面的根节点定义：html {
font-size: 62.5%;
因为苹果的Safari浏览器会凑整数，所以，如果你愿意，可以直接写上63%。做了上述定以后，现在是1em=10px了，这样算就简单多了。可是还是有问题！这一段的前面已经说了，em是个相对单位，糟糕的是，它相对的是它的父节点，也就是说，在整个HTML页面内，1em的大小很可能是不同大小的，这是很麻烦的！没有关系，CSS3引入了一个rem单位,更好的消息是Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+ 等主流的浏览器版本都支持了这个单位了！只是可怜的IE6-8悲剧了！3.rem（root-em）1em大小的计算是基于父级节点的，在实际使用中很麻烦，rem几乎是彻底解决了这个问题！html{font-size:62.5%; }
body{font-size:12px;font-size:1.2 }
p{font-size:14px;font-size:1.4}
&还写px是为了兼容那些还不理解rem单位的浏览器，优雅降级，px单位写在前面的原因你懂的！ 4.%，没错，还有个百分比1em = 12pt = 16px = 100%对然没什么问题，但是，太麻烦了，我想没人会自找那么麻烦的事儿！分享到
关于作者I am a wordpress freelancer.
Any of your great idea(s) will be realized with me!
Please feel free to contact me at anytime,or ,you might just need to drop a line via the following field！
谢谢已收到您的反馈，我们将会尽快与您取得联络！