• css中字体单位px,pt,em,百分比之间的区别和用法


    px 即像素,一般国内网站使用较多,默认大小是16px;

    pt 印刷行业常用单位

    em  相对单位,相对父元素属性的单位 ,一般用于移动端布局

    rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了

    转换公式:

    pt=px乘以3/4
    倍数em=倍数x16px

    注意:1em=16px。那么12px=0.75em,10px=0.625em。

     

    em的用法

     在代码重写的过程中,为了简化font-size的换算,在body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.步骤如下:

      1).body选择器中声明Font-size=62.5%;
      2).将你的原来的px数值除以10,然后换上em作为单位;
       此时有的字体会大的出奇,因为em的值不固定,又会继承父级元素的大小,比如

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

           解释: 其中p属于div的子集,①的设置使12px=1.2em,10px=1em,px和em成十倍关系;所以②的设置使得div字体大小为1.2em=12px;③中p的大小设置是相对②中div字体来说的,所以p的字体大小是1.2*12px=14.4px;而不是十倍关系了;
      3).重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的,将③改为p{font-size:1em;}即可。

     

    em有如下特点:

    1. em的值并不是固定的;

    2. em会继续父级元素的字体大小。

     

    所以我们在写CSS的时候,需要注重三点:

    1. body选择器中声明Font-size=62.5%;

    2. 将你的原来的px数值除以10,然后换上em作为单位;

    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

     

  • 相关阅读:
    替换TStrings
    WordPress数据备份方案
    图像反色
    通过网络复制文件
    SQL Server的patindex和charindex的用法
    C冒泡排序 @100到200素数
    正则。IP验证
    C以二进制读、写、文本
    HTML下拉框、文本框、复选框!
    HTM页面获得本机时间
  • 原文地址:https://www.cnblogs.com/liuyishi/p/6683866.html
Copyright © 2020-2023  润新知