zoukankan      html  css  js  c++  java
  • 使用rem单位的问题——Google下字体很大

    rem的看法

    rem单位确实好处蛮多的,它是相对于根节点,让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是,你用过了就知道,它会出现一个问题:

    用Chrome浏览器打开你做的网站的时候,有时候会出现字体很大的情况。但是刷新一下页面就好了。

    之所以会出现这种情况,原因是因为我们为了计算方便,将原本默认1rem=16px修改1rem=10px。因此,我们在html中通常做了如下设置:

    html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}

    但是呢,Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候,出现了上面字体过大的情况,本来1.6rem应该渲染成16px的字体,却被渲染成了16*1.6=25.6px大小了。

    问题解决

    你仔细研究会发现,出现字体过大的“元素”,通常是没有设置font-size的,元素的font-size是继承根目录的,因此,字体会变大。

    因此,最佳的一种解决方案是:在你要展现的文字父级或者其本身设置font-size

    第二种解决方案:

    我们在页面中添加style样式,给body设置font-size

    例如把下面的代码放到 head 里面:

    <style>  
            body {  
                font-size: 1.2rem;  
            }
    </style>

    转载自:http://www.haorooms.com/post/ydd_rem

  • 相关阅读:
    [ARC074C] RGB Sequence
    [SHOI2014] 概率充电器
    CF368B Sereja and Suffixes
    CF980D Perfect Groups
    Rainbow Roads(gym101617G)(DFS序,差分)
    Educational Codeforces Round 104 (Rated for Div. 2)(A~E)
    Floor and Mod(CF1485C)(数论)
    Longest Simple Cycle(CF1476C)(线性dp)
    Factories(Gym102222G)(树形dp+背包)
    Codeforces Round #699 (Div. 2)(A,B,C,D)
  • 原文地址:https://www.cnblogs.com/YYvam1288/p/7248460.html
Copyright © 2011-2022 走看看