• body{font-size: 62.5%;} 解释


     

    为什么body{font-size: 62.5%;}

     分类:

    在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与px相互转换,em的初始值为1em=16px,显然这样的话,如1.2em则=19.2px,可是我们在设置的时候很少看见19.2px这样表示的大小,也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时,1em则=16px*62.5%=10px,1.2em则=12px,这是不是就简单多了,准确多了呢~~

    Set body font-size to 62.5% for Easier em Conversion

    If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

    code:

    body {
      font-size: 62.5%;
    }
    p {
      font-size: 1.2em;
    }

    2008-08-19 10:20

    CSS教程:简单理解em

    制作网页的时候,必须用CSS强制定义字体大小,保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但是,如果从网站易用性方面考虑,字体大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。

    1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:

    html { font-size: 62.5%; }

    这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,如下图所示:

    解决办法是把html标签样式中的62.5%改成63%,即:

    html { font-size: 63%; }

    在中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:

    p { text-indent: 2em; }

    总结:

            px比em更加容易使用,em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px,所以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会继承父级元素的字体大小。

    https://www.tongbiao.xyz/
  • 相关阅读:
    丰富Bean的配置
    Spring表达式语言
    注入属性文件的值
    Alibaba Cloud Linux 3.2104 64位安装mydumper0.9.1
    Alibaba Cloud Linux 3.2104 64位安装mysql5.6.45
    Alibaba Cloud Linux 3.2104 64位安装php7.2.12
    Alibaba Cloud Linux 3.2104 64位安装nginx1.16.1
    性能调优参考
    redis性能优化
    mq优化
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6589906.html
Copyright © 2020-2023  润新知