CSS3的REM设置字体大小_为什么 css 字体大小用rem 有的文字大有的文字小-程序员宅基地

技术标签: Web前端  字体  rem  css3  

转载自:CSS3的REM设置字体大小


在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。

最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM

在详细介绍rem之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个:

  1.  PX为单位
  2.  EM为单位
PX为单位

在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

em为单位

前面也说了,使用是“px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。Richard Rutter'在《How to size text using ems》一文中有做过详细的介绍,追至早一点,Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。

这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

			body {
				font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
			}
			h1 {
				font-size: 2.4em; /*2.4em × 10 = 24px */
			}
			p	{
				font-size: 1.4em; /*1.4em × 10 = 14px */
			}
			li {
				font-size: 1.4em; /*1.4 × ? = 14px ? */
			}
		

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅:

  1.  Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent
  2.  Converting px into percentage and em for relative CSS font sizes
  3.  Em Vs Percent Widths
  4.  CSS: Units of Measurement
  5.  Jennifer KyrninUsing Points, Pixels, Ems, or Percentages for CSS Fonts
Rem为单位

CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem

前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

我们来看一个简单的代码实例:

			html {
    font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
			body {
    font-size: 1.4rem;/*1.4 × 10px = 14px */}
			h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
		

我在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

remCSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+Apple Safari 5+Google ChromeIE9+Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。

不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么老呢?哈。。。。大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。

如需转载烦请注明出处:W3CPLUS


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15096707/article/details/51733129

智能推荐

TOEFL写作——独立写作段落拓展-程序员宅基地

文章浏览阅读156次。功能 常用单词、短语 表示列举 For example, / For instance, / Take ... as an example. We might take .. for example / as an example. A case in point is (that) ... 分析 unsurprisingly in this case...

值得学习的C语言开源项目-程序员宅基地

文章浏览阅读170次。转载自https://blog.csdn.net/a493203176/article/details/79195454值得学习的C语言开源项目-1. WebbenchWebbench是一个在linux下使用的非常简单的网站压测工具。它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力。Webbench使用...

Sqlite3 数据库基本操作_-lsqlite3-程序员宅基地

文章浏览阅读1w次,点赞19次,收藏173次。Sqlite3 数据库基本操作1、sqlite3命令**2、sqlite3编程接口:**3、事务:一个或多个更改数据库的扩展4、like和glob子句:5、limit 和 offset6、having:7、distinct8、约束:9、内连接10、别名11、触发器12. 索引1、sqlite3命令1.打开数据库: sqlite3 <*.db>2.系统命令: 以’.'开头 .quit : 退出sqlite3 .help : 查看帮助文档 .database: 显示当前打开的数据库_-lsqlite3

MapReduce当中Partitioner的用法_简述mapreduce中,partitioner 如何使用-程序员宅基地

文章浏览阅读277次。Partitioner的用法:防盗版实名手机尾号:73203。如果现在我们的需求变成,输出放在两个文件当中,按照关键字的首个字母的26个字母来分,头13个放在一个文件当中,以此类推, 这时我们就要用到partition的技术。package com;import java.io.IOException;import java.util.StringTokenizer;import org..._简述mapreduce中,partitioner 如何使用

Google Earth Engine(GEE)对指定地点Sentinel-2 Level1C数据进行NDVI指数的计算_gee计算区域栅格尺度ndvi 哨兵-程序员宅基地

文章浏览阅读4k次,点赞5次,收藏55次。Google Earth Engine (GEE) 是由谷歌公司开发的众多应用之一。借助谷歌公司超强的服务器运算能力以及与NASA的合作关系,GEE平台将Landsat/Sentinel等可以公开获取的遥感图像数据存储在谷歌的磁盘阵列中,使得GEE用户可以方便的提取、调用和分析海量的遥感大数据资源。本文基于GEE平台,实现对指定地点Sentinel-2 Level1C数据进行NDVI指数的计算,示例地点为湖南省长沙市。代码如下:(JS)var cs = China.filterBound._gee计算区域栅格尺度ndvi 哨兵

JQUERY自定义下拉单选加可输入的SELECT_jquery selectpage 自定义输入-程序员宅基地

文章浏览阅读1.2k次。本文将介绍一个使用JQUERY实现的一个自定义下拉单选框ton_jquery selectpage 自定义输入

随便推点

Execution failed for task ':app:mergeDebugResources'-程序员宅基地

文章浏览阅读2.2w次。(Error:Execution failed for task ':app:mergeDebugResources'.> Some file crunching failed, see logs for details)_execution failed for task ':app:mergedebugresources'.

JSONPath的基础使用_jsonpath.eval-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏14次。JSONPath可以快速提取json固定位置、范围的数据,而不需要创建单独的JSONObject对象。但如果每次处理的json数据格式会改变,则该方式不太适用。_jsonpath.eval

asp.net页面中Menu控件下拉菜单被frame挡住和iframe自适应高度的解决办法-程序员宅基地

文章浏览阅读155次。当你在做一个仿windows程序的顶部菜单框架的时候,在asp.net中你可能会使用两个frame,一个frame在上面用来放菜单一个frame在下面用来方菜单点击后打开的页面.页面实现很简单,单运行的时候你就发现放菜单的那个frame将菜单的下列菜单在挡住根本伸不到下面的frame中.解决被挡住的问题是不能使用frame,做法是在一个单独的asp.net页面中放一个menu 和一个if..._asp:menu超出iframe如何解决

服务发现之Consul介绍、部署和使用_consul安装需要数据库吗-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏7次。为什么使用服务发现微服务的框架体系中,服务发现是不得不提的一个模块。我相信了解或者熟悉微服务的应该都知道它的重要性。这里简单的介绍一下。我们看下面的一幅图片:图中,客户端的一个接口,需要调用服务A-N。客户端必须要知道所有服务的网络位置的,以往的做法是配置是配置文件中,或者有些配置在数据库中。这里就带出几个问题:需要配置N个服务的网络位置,加大配置的复杂性服务的网络位置变化,都需要改变..._consul安装需要数据库吗

python3 在线加密_Python3对称加密算法AES、DES3实例详解-程序员宅基地

文章浏览阅读281次。本文实例讲述了Python3对称加密算法AES、DES3。分享给大家供大家参考,具体如下:python3.6此库安装方式,需要pip3 install pycryptodome。如有site-packages中存在crypto、pycrypto,在pip之前,需要pip3 uninstall crypto、pip3 uninstall pycrypto,否则无法安装成功。C:\WINDOWS\sy..._des如何导入unpad案例

算法导论第三版 10.1-6习题答案-程序员宅基地

文章浏览阅读414次。10.1-6答案:设定两个栈为s1和s2,那么s1用来ENQUEUE(),s2用来DEQUEUE(),当然s1需要用来为DEQUEUE()操作作过渡,流程如下:(1)首先将入队元素1,2,3依次放进栈s1。此时s1元素从低到高为1,2,3,s2中暂时无元素。(2)然后依次将1,2,3从s1中弹出并且放入s2中。此时s1栈空,s2中元素从低到高依次为3,2,1(3)若此时进行还需要ENQU...

推荐文章

热门文章

相关标签