博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
响应式十日谈第一日:使用 rem 设置文字大小
阅读量:6229 次
发布时间:2019-06-21

本文共 2202 字,大约阅读时间需要 7 分钟。

http://ued.taobao.org/blog/2013/05/rem-font-size/

上面回顾:

在序言中我们已经提到了响应式的一些基本理念,比如:

响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。

序言中同样提到,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢?

当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉。

网页中常用的文字大小单位是 px(Pixels),em,现在中新增了 rem 这个单位。

一、那到底什么是 rem 呢?

规范中明确写道:

Equal to the computed value of ‘font-size’ on the root element.

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?:

 

太好了,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

可是,W3C 那些家伙为什么要闲着下面疼的新增这样一个单位呢?它和 em 有啥区别呢?

我们知道 em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{

font-size:62.5%; /* 10÷16=62.5% */

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

font-size:14px;

font-size:1.4rem;

}

需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。

二、为啥要用 rem 呢?

黑夜给了我黑色的眼睛,我将用它寻找关怀。

浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做,作为一个具有「人文关怀」的前端,我们完全可以考虑这些情况。由其是在引入了 CSS预处理工具之后,这几乎不会增加什么成本。

也再次印证前面提到的:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。

各个浏览器的设置方法如下:

  1.  IE浏览器:按下 Alt 键,打开菜单栏→查看→字体大小

  2. Chrome 浏览器:设置→显示高级设置→网页内容

  3. Firefox 浏览器:按下 Alt 键,打开菜单栏→工具→选项→内容选项卡

  4. 其他浏览器就不一一举例了……

三、什么时候用 rem?

既然 rem 的可用性更好,是不是在所有地方都去使用呢?别捉急,通常在标题,正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:

所以,什么时候用 rem,如何用好 rem? 这也需要你拿出 18K的黑色乌金睛来照亮整个页面。让我们一起:

抛开布局,响应文字;抛开成见,响应内心。

在面对响应式开发的时候,什么才是合适的,什么是不合适的,你真的想好了吗?

(看图思考:有个小姑娘很爱漂亮,上图是她正在偷偷的穿妈妈的高跟鞋……)

下面预告:

接下来,第二日讲为大家带来《响应式十日谈第二日:在Media Queries中使用 em 单位》,将为大家讲解 Media Queries 中为何要用 em 作为宽度临界值单位?这将如何提升我们的「情怀和节操」?欢迎收听我的微博:,30分钟内速回粉哦。

以上

一丝

转载请注明出处:

 

posted on
2015-11-25 11:03 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/rhett-web/p/4993999.html

你可能感兴趣的文章
ios31--NSThread
查看>>
设计模式总结篇系列:桥接模式(Bridge)
查看>>
ubuntu VNC连接树莓派
查看>>
[nodemon] Internal watch failed: watch ENOSPC错误解决办法
查看>>
全球首发----Tech·Ed 2006中国 实况报道。全程跟踪。(四)
查看>>
向C#的选项卡中添加自定义窗体
查看>>
WPF客户端读取高清图片很卡,缩略图解决方案
查看>>
ubuntu安装和配置SVN【转】
查看>>
通过串口连接控制树莓派
查看>>
线程池系列三:ThreadPoolExecutor讲解
查看>>
wp7 XAML基础
查看>>
机器这次击败人之后,争论一直没平息 | SQuAD风云
查看>>
Oracle中shrink space命令详解
查看>>
验证码 生成变形的文字
查看>>
用cflow工具生成代码函数调用关系【转】
查看>>
ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理
查看>>
android用户界面之菜单(Menu)教程实例汇总
查看>>
单链表
查看>>
linux下的僵尸进程处理SIGCHLD信号【转】
查看>>
c#中volatile关键字的作用
查看>>