zoukankan      html  css  js  c++  java
  • 关于相对字体大小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/

  • 相关阅读:
    Codeforces Round #592 (Div. 2)
    2019 China Collegiate Programming Contest Qinhuangdao Onsite
    2019CCPC 秦皇岛 E.Escape
    2018 Multi-University Training Contest 3
    AtCoder Regular Contest 098
    Educational Codeforces Round 74 (Rated for Div. 2)
    Codeforces Round #590 (Div. 3) F
    AtCoder Regular Contest 99
    [AH2017/HNOI2017] 单旋
    [CF1304F] Animal Observation
  • 原文地址:https://www.cnblogs.com/wjh0916/p/4708323.html
Copyright © 2011-2022 走看看