参考博客:http://www.cnblogs.com/daxiong/articles/2772276.html

在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与px相互转换,em的初始值为1em=16px,显然这样的话,如1.2em则=19.2px,可是我们在设置的时候很少看见19.2px这样表示的大小,也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时,1em则=16px*62.5%=10px,1.2em则=12px,这是不是就简单多了,准确多了呢~~

code:

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

其他补充:

因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。 用rem定义尺寸的另一个好处是更能适应缩放/浏览器设置字体尺寸等情况(因为rem相对于字体大小,会同步改变)。

CSS: body{font-size: 62.5%;}设置原因的更多相关文章

  1. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  2. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  3. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  4. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  5. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  6. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  7. TP5.1:将外部资源引入到框架中(css/js/font文件)

    为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...

  8. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  9. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

随机推荐

  1. 反射调用发生错误信息 LoadNeither

    错误信息: Service cannot be started. System.Reflection.TargetInvocationException: Exception has been thr ...

  2. Sql Server 开放4399端口命令行

    netsh advfirewall firewall add rule name="Open Port 80" dir=in action=allow protocol=TCP l ...

  3. Rails 5 Test Prescriptions 第10章 Unit_Testing JavaScript(新工具,learn曲线太陡峭,pass)

    对Js的单元测试是一个大的题目.作者认为Ruby的相关测试工具比Js的测试工具更灵活 大多数Js代码最终是关于响应用户的行为和改变DOM中的元素 没有什么javascript的知识点.前两节用了几个新 ...

  4. 【hive】分组求排名

    分组求排名 相信好多使用Mysql的用户一定对分组求排名的需求感到发怵. 但是在hive或者oracle来说就能简单实现. 采用窗口函数:rank() over() / row_number() ov ...

  5. do-while语句和while的区别

    do-while语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.其实就是,代码在刚开始执行的时候,都是要先走一遍do循环体内的代码,然后在与while里面的条件进行判断,成 ...

  6. 基于Open XML 导出数据到Excel

    数据导出的结果: 步骤1.新建一个Excel 文档,模板根据自己需要设置 步骤2.使用OpenXml  打开Excel 文件 步骤3.点击ReflectCode 功能,生成相应的代码文档 using ...

  7. 转载-lvs-dr模式+keepalived双机

    lvs+keepalived实现高可用群集配置详解 Mon 16 April 2012 来源: https://www.linuxzen.com/lvskeepalivedshi-xian-gao-k ...

  8. 联想A390T刷机ROOT教程

    一.联想A390T手动进入Recovery的方法: [步骤一]首先,将你的A390T手机关机,关机状态下,先按住电源键2秒,不要松开,再同时按下音量加.音量减两个键,此时,3个键一直按住不要放开,几秒 ...

  9. Life Cycle(JSF+Facelets)

    一.JSF Life Cycle: 图1 图2 应用程序的生命周期是指应用程序的各个阶段,从开始到结束.所有应用程序的生命周期.在web应用程序生命周期中,执行常见任务,包括以下内容.■处理传入的请求 ...

  10. JSONP、CORS解决跨域问题

    一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,对href属性都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先 ...