• 关于相对字体大小rem的使用


    我在这里只是说具体的用法,在HTML页面使用rem单位,首先设置一个页面的基本字号的字体,这个字号最好设置在HTML便签里,如下:
    html {
       -ms-text-size-adjust: 100%;
       -webkit-text-size-adjust: 100%;
    }

    html{

    font-size: 62.5%;/*font-size:10px;  这是覆盖浏览默认字体进而设置基准字体大小*/

    -webkit-tap-highlight-color: transparent;

    }
    body {
        font-size: 1.6rem;
        line-height:1.6;
    }
    我就以提问题的方式说说关于单位在移动页面中的一些常识

    为什么设置text-size-adjust:100%;?

    iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

    text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.

    为什么设置font-size: 62.5%;?

    这是将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;,将页面字号设置为 16px。当然并不是所有浏览器的默认字号都是16px;

    rem 和 em 有什么区别?

     em 根据上下文变化不同,rem 只跟基准设置关联,只要修改基准字号,所有使用 rem 作为单位的设置都会相应改变。

    最后在使用过程中应该视情况而定,一些需要根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px

    在这里提供一个px,em,rem单位转换工具

    http://pxtoem.com/

  • 相关阅读:
    C#如何连接wifi和指定IP
    3.4 小结
    3.3.4.5 起始与清除
    3.3.4.4 打印行
    3.3.4.3 设置字段分隔字符
    3.3.4.2 字段
    3.3.4.1 模式与操作
    3.3.4 使用 awk 重新编排字段
    3.3.3 使用 join 连接字段
    3.3.2 使用 cut 选定字段
  • 原文地址:https://www.cnblogs.com/wjh0916/p/4708323.html
Copyright © 2020-2023  润新知