文档章节

如何实现 font-size 的响应式

duozuo2006
 duozuo2006
发布于 2016/12/04 23:41
字数 1946
阅读 11
收藏 0
点赞 0
评论 0

现在的很多网站,从布局上来说,尽管是响应式的(当然,或许可以说成所谓响应式的)。但是,从字体上来说,却不一定是响应式的。虽然,每个网站可能会通过某些方式(比如频繁使用 @media )来让自己的网站在不同的屏幕大小下显示不同大小的字体,但是,这样不能叫做响应式,这只是一种适应式的做法。

 

那么,怎么样才能对我们的 font-size 实现真正的响应式呢?

 

我们需要做的主要有以下两点:

 

1、制定一个最大的和最小的屏幕宽度值,我们的 font-size 应该是在这个屏幕范围内平滑均匀的变化;

 

不可能让字体大小一直不停的变化。试想一下,自己一直缩小或者方法浏览器,字体一直变小或者变大的场景。

 

2、制定最大和最小的 font-size,屏幕大小小于最小的屏幕宽度值的时候,应用最小的 font-size,反之,应用最大的 font-size;

 

OK,计划制定好了,那么,应该如何实施呢?我们需要用到哪些技术呢?

 

其实要用到的技术不多,只是,我们需要把脑子转一下。

 

@media:CSS Level 3 提供的媒体查询,只要做过响应式,或者任何适应屏幕功能的肯定用过这个属性。所以,在此不过多解释此属性,详细可查看 @media | MDN

 

vw:Viewport 单位,1vw 相当于屏幕宽度的百分之一。此处也不过多解释,详细可查看 length | CSS

 

calc:这是 CSS 提供的一个非常强大的属性,可以用来动态计算 CSS 的值。我们的功能主要就是通过这个函数来实现。详细可查看 calc | MDN

 

OK,需要的技术也齐全了。那么,现在就来一步一步实现。

 

定义变量

 

按照上文中所说的计划那样,我们需要定义四个值,他们分别是最小屏幕宽度,最大屏幕宽度,最小字体,最大字体。

 

不过,使用 px 来定义字体大小显得不是很优雅,我们可以使用 rem 来定义我们的字体。那么,这时候,就需要先对网站的根元素设置字体大小了。

 

然后,再来更新我们的变量。

 

我们把我们的变量定义和根元素的 font-size 放在文件的顶部。在这里,我们就不写那些相关的 reset 等样式了。

 

加入测试内容

 

起了个好头,然后进行下一步,很简单,写我们的 HTML,此处不做过多赘述。

 

使用 @media 对限制字体大小边界值

 

上文中说过,在我们的屏幕宽度小于 600px 的时候,字体大小为 1.4rem,屏幕宽度大于 1200px 的时候,字体大小为 1.8rem。这个功能实现起来很简单,只需要应用相应的一小段媒体查询就行了。

 

OK,就这么一段代码,我们就可以将字体大小的边界值进行限制。在屏幕宽度小于或者大于对应的屏幕宽度值的时候,我们的字体大小都会保持在一个恒定的值。

 

那么,边界限制做好了,接下来就是要实现真正的响应式了。怎么说呢?我们要让我们的 font-size 在 600px ~ 1200px 的屏幕宽度范围内平滑的变化。当然,这还不够,并不是说,只是给 font-size 设置一个百分比或者任何其他的相对单位,然后让这个字体能够在放大缩小屏幕的同时也能够放大缩小。我们要做的,是要通过精确的大小控制来实现响应式。

 

使用 calc 函数实现字体大小的响应式

 

仔细看看上文中对字体大小边界值的限制的代码,已经有两个 @media 了,在这个部分,我们肯定还要加一个 @media,是不是显得有点多余?所以,我们可以稍微精简一下。

 

只要两个 @media 其实就够了。对于不在媒体查询范围内的,只需要设置一个默认值就行了。但是,要注意的是,这个默认值一定要写在两个媒体查询规则的前面。否则,会由于 CSS 的层叠的特性,后声明的样式会覆盖掉先声明的样式,从而导致媒体查询规则不起作用。

 

那么,要实现在这个屏幕宽度范围内精确平滑的变化,肯定需要用到一点数学计算。

 

1、font-size 变化的范围是 1.8rem - 1.4rem = 0.4rem;

2、屏幕宽度的变化范围是 1200px - 600px = 600px;

3、最小的 font-size 是 1.4rem。那么,屏幕宽度只要大于 600px,这个值肯定会增加,同时,只要屏幕宽度达到 1200px,这个值也达到 1.8rem,然后便不再变化;

 

可以看下图:

 

比如,我们现在有三种屏幕宽度,分别是 600px,1000px,1200px。那么,仔细观察左边的参考线,我们将最小的那个屏幕宽度去掉,相当于就剩下了两个值,一个是 a,一个是 b。

 

由于 1200px 是我们设置的屏幕宽度的最大值,那么,也就是说,b 的变化范围最大也就是 a 的长度。通俗一点说就是,可以把 a 和 b 看成进度条,a 为 100% 的长度,b 为不断增加或者减少的长度。所以,这里就存在了一个比例值,当 b 为 0 的时候,这个比例也为 0,当 b 为 100% 的时候,这个比例就是 1。

 

那么,按照这样的思路,转换到对应 font-size 的变化:变化范围是 0.4rem,这是分母,那么,分子该如何计算呢?我们怎么知道字体增加了多少呢?

 

此处肯定是没有减少的。我们是在 600px ~ 1200px 之间变化的,最小的字体为 1.4rem,无论怎么算,字体大小都不会再减小了。

 

所以,此处还有一个小小的转换。想一想,我们变化的不只是字体大小,还有屏幕宽度也在变化。所以,就像图片解释的那样,可以使用屏幕宽度的计算来得到一个相应的比例,然后,乘以 font-size 的变化范围 0.4rem,就可以得到我们增加的字体大小了。然后,在最小 font-size 的基础之上加上这个变化的范围,就可以得到在对应屏幕宽度下的精准的 font-size了。

 

所以,使用 calc 可以这样写:

 

注意,calc 函数在计算除法的时候,/ 右边只能是数字,不能带单位。* 要求至少一个参数是数字。

 

对这个式子我也解释一下,可以看到,其中有个表达式是 100vw - 600px,这是什么意思呢?

 

转换成文字:浏览器可视区域的宽度减去最小宽度。

 

其实理解起来很简单,举个例子:假设现在屏幕宽度为 1000px,那么,100vw - 600px 得到的结果为 400px,然后,除以 600,最后得到的是 2 / 3。然后,这个值去乘以 0.4rem,那么,这样就能计算出增加的字体大小值了,然后加上 1.4rem,就能得到最终的一个 font-size了。

 

所以,就这样,我们就对 font-size 实现了响应式。不用再通过各种屏幕大小的媒体查询来变化了。

 

值得庆幸的是,此规则对于 line-height 同样适用。

 

以下是完整的 SCSS 代码:

 

参考链接

  • Precise control over responsive typography

  • Flexible typography with CSS locks

本文转载自:

共有 人打赏支持
duozuo2006
粉丝 0
博文 10
码字总数 8728
作品 0
北京
CSS_相对单位rem

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

喵王不瞌睡 ⋅ 2016/03/18 ⋅ 0

web app变革之rem

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

w-rain ⋅ 2015/08/21 ⋅ 0

响应式布局小结

根据维基百科定义:弹性网格布局、弹性图片和媒体查询整合起来,并将其命名为RWD(Responsive Web Design,响应式布局)。下面分别介绍: 媒体查询 首先看下百度百科对响应式布局定义 百度百...

GTReload ⋅ 2016/11/21 ⋅ 0

响应式rem针对UC浏览器12号字体可行性解决方案

手机UC浏览器12号字体可行性解决方案 今天上班测试手机专题时候发现,UC浏览器去浏览到手机页面12号字体放大到16号字体大小,始终是改变我所写的样式为12号字体大小,但是苹果 saf 浏览器 还...

PINGE ⋅ 2015/04/08 ⋅ 0

media查询尺寸

PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; ) 1280*800(16:10 |15.4寸) 1280*102...

袁max ⋅ 2017/11/23 ⋅ 0

HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方 ⋅ 01/04 ⋅ 0

如何利用vw+rem进行移动端布局

前言 因为在公司,只有一个前端,在做移动端布局的时候。利用px进行布局,发现,需要进行各种手机的适配。 所以在开发第二版的时候,想着引用lib-flexible库(即手淘的方案),询问了上一家公司的...

聪明的竹子爱学习 ⋅ 06/20 ⋅ 0

响应式Web设计——自定义网页字体

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。 曾有一些...

生气的散人 ⋅ 2013/03/07 ⋅ 4

响应式布局的行高与字体大小是否有关

@灵犀 你好,想跟你请教个问题: 123456 在响应式布局中,如果上面span标签的font-size:1.5em;行高48px; 此时的行高此时的行高应该设3em还是2em?就是说原来的行高3em=48px,还是在字体的...

王碎豆 ⋅ 2015/08/25 ⋅ 1

构建自动化前端样式回归测试——BackstopJS篇

BackstopJS具有以下特性: 支持多页面、多测试用例测试 可以使用脚本模拟出用户的交互动作 提供命令行和浏览器两种形式报告 支持PhantomJS或SlimerJS做浏览器引擎,事实上两种引擎也可以改造...

bug_killer ⋅ 01/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 33分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 43分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部