文档章节

随境修复,灵活的字体

FeanLau
 FeanLau
发布于 2017/04/16 22:28
字数 201
阅读 4
收藏 0

为了达到响应式的效果,需要少许数字计算:

目标字体除以容器的font-size。即上下文。结果就是所需的字体大小,以em表示,灵活多变。

换句话说,相对字体大小能以下列简单算式计算:

目标 / 上下文 = 结果

有了算式,回到那个24px的标题。把bod元素内的font-size: 100%假设为16px,即可直接把数值代入算式。因此,相对于上下文(16px),h1的目标字体大小(24px)为:

24 / 16 = 1.5

得出结果:24px是16px的1.5倍,故font-size为1.5em:

h1{
   font-size:1.5em;   /* 24px / 16px */
   font-style:italic;
   font-weight:normal;
}

标题的大小就能完美地配合草图指定大小了,而表达单位还是相对的,可随意拖放。

© 著作权归作者所有

共有 人打赏支持
FeanLau
粉丝 3
博文 224
码字总数 122232
作品 0
浦东
程序员
私信 提问
xApi Manager 接口管理平台 v1.1发布

xApi Manager-哆啦接口管理平台 XAPI MANAGER -专业实用的开源接口管理平台,为程序开发者提供一个灵活,方便,快捷的API管理工具,让API管理变的更加清晰、明朗 v1.1版本说明 1.完善对php多...

duolatech
2017/05/23
1K
2
Gitblog v2.1.3 发布,开源 markdown 博客系统

Gitblogv2.1版本发布更新 2.1.3版本更新特性 此版本主要是bug修复 1.修复了中文markdown文件名页面404的问题 2.修复了不同文件夹下同名markdown冲突的问题 3.修复draft状态博客也显示的bug 4...

jockchou
2015/08/22
1K
6
GTK+ 3.6.4 发布

GTK+ 3.6.4 修复了更新动画的字体描述时导致程序崩溃的问题。 GTK(GIMP Toolkit)是一套跨多种平台的图形工具包,按LGPL许可协议发布的。虽然最初是为GIMP写的,但目前已发展为一个功能强大、设...

oschina
2013/01/08
1K
5
Bootstrap 首个补丁版本 v4.1.1 发布

Bootstrap v4.1.1 发布,这是 Bootstrap 首次发布补丁版本,更新信息如下: 为文件输入添加了验证样式 改进了深色表格的打印 禁止默认情况下的 弃用通知 清理了一些 JS 全局变量并提高了覆盖...

h4cd
2018/05/01
1K
1
社交系统ThinkSNS Plus V1.9.0更新播报

研发发布版本号:1.9.0 更新发布时间:2018年8月6日 发布类型:新功能“话题”发布、细节调整与优化 ThinkSNS+最新体验demo:请于官网下载/安装最新版或点击在线咨询 最新优惠活动:ThinkSN...

ThinkSNS账号
2018/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术复习-Spring事务

spring事务 1.事务传播机制 在spring中事务存在嵌套的情况,在这种情况下事务如何协调,spring在TransactionDefinition中设了七个规则,被称作事务的传播机制 1.TransactionDefinition.PROP...

Lubby
21分钟前
1
0
linux 虚拟机安装

一、虚拟化检查 1. 检查cpu是否支持 grep -E 'vmx|svm' /proc/cpuinfo 2. 检查虚拟化是否开启 lsmod |grep kvm 显示内容与截图一致,服务器已经开启了虚拟化的支持,如果没有前2条内容,...

小儿
21分钟前
2
0
Linux之系统日志简介

前言 日志在排查文件的时候至关重要,在Linux上一般跟系统相关的日志默认都会放到/var/log下面。 1、/var/log/boot.log 一般包含系统启动时的日志,包括自启动的服务。 2、/var/log/btmp 记录...

城市之雾
21分钟前
1
0
Android数据存储2 文件存储

1.内部存储(私有的,其他程序不能获取) a. 存:FileOutputStream fos = openFileOutput("file", MODE_PRIVATE); 读: FileInputStream fis = openFileInput("file"); 文件路径:data/data/当......

Coding缘
21分钟前
1
0
23种设计模式全解析

一、设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种:适配器模式、装饰器模式、代理...

嘿嘿嘿IT
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部