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

使用rem单位的问题——Google下字体很大的更多相关文章

  1. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  2. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  3. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  4. 关于使用rem单位,calc()进行自适应布局

    关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...

  5. WebApp开发之--"rem"单位(转)

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

  6. rem单位

    rem单位 rem基础 px是固定单位,不同分辨率下效果不一样,导致网页布局出现偏差. em是根据父元素来改变字大小 rem是根据根元素html来改变字体大小,只要改变了根元素的font-size就可 ...

  7. rem 单位

    rem(font size of the root element)是指相对于根元素的字体大小的单位.   主流的一些web app的适配解决方案: 流式布局: 流式布局在页面布局的时候都是通过百分比 ...

  8. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  9. rem单位怎么使用

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

随机推荐

  1. [LeetCode 题解] Combination Sum

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 Given a se ...

  2. 转载:spring boot学习

    Spring Boot学习 Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提 ...

  3. 【05】循序渐进学 docker:系统资源和网络

    写在前面的话 在上一篇学习 Dockerfile 的时候其实还有几个相当重要得关键中没有谈到,但没关系,在后面的内容会单独提出来一个一个的学习.这里就先谈谈关于资源的控制个容器的网络~ 资源限制 其实 ...

  4. 极大似然估计MLE 极大后验概率估计MAP

    https://www.cnblogs.com/sylvanas2012/p/5058065.html 写的贼好 http://www.cnblogs.com/washa/p/3222109.html ...

  5. OCP题库变了,2018年052新题库-29题

    29.In one of your databases: * The database default tablespace is EXAMPLE. * Deferred_segment_creati ...

  6. 洛谷P3613 睡觉困难综合征

    传送门 题解 人生第一道由乃…… 做这题之前应该先去把这一题给切掉->这里 我的题解->这里 然后先膜一波zsy大佬和flashhu大佬 大体思路就是先吧全0和全1的都跑答案,然后按位贪心 ...

  7. leetcode-788-Rotated Digits(使用vector替代if else的逐个判断)

    题目描述: X is a good number if after rotating each digit individually by 180 degrees, we get a valid nu ...

  8. iOS8 dismissViewControllerAnimated:YES在Show Segue不工作

    最近使用iOS8 Sdk(xcode6.1.1)使用Show Segue功能,V_A视图push到V_B视图,然后想通过使用按键返回V_A,我记得ios6的时候可以使用[self dismissVie ...

  9. 干掉Vivado幺蛾子(2)-- 快速替换debug probes

    目录 1. 什么是ECO 2. 操作步骤 参考文献: 我们做项目,进入找bug阶段时,需要用ILA捕获相关的信号.之前我做项目,每改动一次探针(debug probes),都要重新综合.实现,通常要花 ...

  10. java8特性之Lambda表达式

    1.典型的用Lambda表达式的场景 如果有这样的一个小应用,其中的一个类Student包含姓名(name),性别(sex),分数(score),如下: package demo; public cl ...