Css 字体大小使用百分比？

我最近读了不少关于字体大小调整的文章，其中大部分都嘲笑使用px是不可原谅的罪行（好吧，也许没那么糟糕，你明白了），因为它在旧浏览器中无法正确调整大小

我真的很想有一个我自己使用的标准，在过去一直是px，因为它很简单，容易理解，并且很容易达到设计中指定的确切字体大小-但我现在怀疑使用px

我最近在一个项目中使用了em，因为它需要我使用jQuery创建的文本大小调整功能。但是我发现它非常令人沮丧，因为如果你有两个元素在彼此内部，并且都有指定的em大小，em会放大（希望这是有意义的）

所以我想知道如何使用%来调整字体大小，我见过一些大型网站使用这种技术（即Yahoo），据我所知，它似乎拥有em的所有优点，而且没有令人难以置信的恼人的放大功能

总之，我只是想知道在CSS中使用%来调整字体大小是否有任何问题？在字体大小调整方面，它会比使用PX更好吗？还有什么明显的倒退吗？

---

抱歉，如果问题之前的导语有点多：/I我仍然习惯于整个QA工作

也许这会让制作字体大小脚本更有意义。 我已经做了一个剧本，完全符合你的愿望，但我再也找不到了

伪代码：

var fontSize = 15; // (em) input
var fontResize = -1;// (em)input
fontSize = fontSize+fontResize; //current div

for(every inherent parent classname == 'classname-em')
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90;

---

用文字解释。脚本需要调整某些字体的大小，完成此操作后，它还将查找一些父div来调整这些字体的大小，但它们的大小将比其固有大小小10%。带着一些困惑，你将获得正确的转换。同时尽量避免填充物和边框宽度

有一个名为jQuery的插件。它根据百分比调整文本大小。如果访问者出于某种原因禁用了JavaScript，它将正常显示，因此设置一个合理的PX或EM备份

这取决于jQuery，所以您需要将其包含在页面中（如果您还没有）

---

供参考：

/*global jQuery */
/*! 
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

    $.fn.fitText = function( kompressor, options ) {

        var settings = {
        'minFontSize' : Number.NEGATIVE_INFINITY,
        'maxFontSize' : Number.POSITIVE_INFINITY
      };

            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor

        if ( options ) { 
          $.extend( settings, options );
        }

        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();

                // Call on resize. Opera debounces their resize by default. 
        $(window).resize(resizer);

            });

    };

})( jQuery );

试试这个

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

所以，当你在“包装器”里说1em时，你的尺寸将非常类似于10px。下面是一个示例表：

3em == 30px
.5em == 5px
8.5em == 85px

这将有助于你过渡

---

当然，你需要在正文后面加一个包装标签。据我所知，网页设计的标准是用百分比来设置正文中的字体大小，然后用ems来改变字体大小。您可以在body标签之外使用百分比，而不会产生任何副作用，但我认为许多开发人员发现ems更容易使用（任何人都可以自由查看我的这一点）

---

如果使用ems设置正文字体大小，则会出现危险；较旧的浏览器阻塞并错误地显示文本，尤其是在缩放时。

在CSS3中，使用

rem

（root

em

）。大小调整将不受父元素的em大小的影响

通过在

：root

伪元素上设置字体大小来设置根字体大小，如下所示：

:root {
    font-size: 16px;
}

---

我可能错了，但我认为使用

%

容易产生与您认为

em

完全相同的缺陷。如果有两个

div

元素，一个在另一个元素中，每个元素的

字体大小为110%

，那么计算结果将与

字体大小为1.1em

的元素完全相同。除非我真的弄错了。我会很快尝试一些HTMLing来检查，我以前没有听说过，但如果这是真的，那将是一个真正的麻烦。我想使用%的主要原因是它没有这样做@肖恩·邓伍迪：你的小提琴有缺陷。您正在为

em

和

%

使用不同的值。如果我使这些值相等（

1em

：

100%

），结果是：CSS3定义了一个新的单位“rem”，它是基于根（html）字体大小的em。（）支持远不是通用的，但它涵盖了IE9、Safari 5、Chrome、Firefox 3.6+和Opera 11.60+。（来源：）问题是关于在CSS中使用不同大小的字体，而不是适合文本。这是我实际做的事情！有些人似乎说他们更喜欢

em

而不是

rem

，但我一直不明白为什么。。。ems似乎总是让我的事情变得过于复杂。这个答案可以通过添加一个定义为root的注释（不检查，我假设它是

body

），以及浏览器支持问题（如果有）来进一步改进。html文档中的

：root

元素就是

html

元素，不是

主体

。