七个你可能不了解的CSS单位
我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位。
随着Web继续的发展,对新的解决方案的需求也会继续增大。因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它。
这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具。
今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧。
rem
我们将从你已经熟悉的东西开始。 em
单位被定义为当前字体大小。例如,如果你在 body
元素上设置一个字体大小,那么在 body
元素内的任何子元素的 em
值都等于这个字体大小。
<body>
<div class="test">Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
在这里,我们说这个 div
将有一个 1.2em
的 font-size
。它是所继承的字体大小的 1.2
倍,在这个例子中为 14px
。结果为 16.8px
.
但是,当你在每个元素内都级联 em
定义的字体大小将会发生什么?在下面的代码片段中我们应用和上面一模一样的CSS.每个 div
从它们的父节点继承字体大小,带给我们逐渐增加的字体大小。
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
虽然在某些情况下可能需要这个,但是通常你可能想基于一个唯一的度量标准来按比例缩放。在这种情况下,你应该用 rem
。 rem
中的" r
"代表" root
";这等同于font-size
基于根元素进行设置;在大多数情况下根元素为 html
元素。
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
在上一个示例中三个嵌套的 div
的字体大小计算结果都为 16.8px
。
对网格布局的好处
rem
不是只对定义字体大小有用。比如,你可以使用 rem
把 整个网格系统 或者UI样式库基于HTML根元素的字体大小上,然后在特定的地方使用 em
比例缩放。这将带给你更加可预测的字体大小和比例缩放。
.container {
width: 70rem; // 70 * 14px = 980px
}
从概念上讲,像这样一个策略背后的想法是为了允许你的界面随着你的内容按比例缩放。然而,这可能不一定对每个案例都有意义。
"rem(root em)单位" 的兼容性列表。
vh和vw
响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是 vh
和 vw
单位所提供的。
vh
等于viewport高度的 1/100
.例如,如果浏览器的高是 900px
, 1vh
求得的值为 9px
。同理,如果显示窗口宽度为 750px
, 1vw
求得的值为 7.5px
。
这些规则表面上看起来有无尽的用途。例如,做一个占满高度的或者接近占满高度的幻灯片,可以用一个非常简单的方法实现,只要用一行CSS:
.slide {
height: 100vh;
}
设想你想要一个占满屏幕宽度的标题。为做到这一点,你将会用 vw
来设置一个字体大小。这个大小将会随着浏览器的宽度按比例缩放。
视窗单位: vw
, vh
"的兼容性列表。
vmin 和 vmax
vh
和 vm
总是与视口的高度和宽度有关,与之不同的, vmin
和 vmax
是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为 1100px
宽、 700px
高, 1vmin
会是 7px
, 1vmax
为 11px
。然而,如果宽度设置为 800px
,高度设置为 1080px
, 1vmin
将会等于 8px
而 1vmax
将会是10.8px
。
所以你什么时候可能用到这些值?
设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于 100
的vmin
值将可以实现这个效果。例如,一个正方形的元素总是至少接触屏幕的两条边可能是这样定义的:
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成 vmax
。
.box {
height: 100vmax;
width: 100vmax;
}
这些规则的组合提供了一个非常灵活的方式,用新的、令人兴奋的方式利用你的可视窗口的大小。
Viewport units: vmin, vmax " 兼容列表。
ex 和 ch
ex
和 ch
单位,与 em
和 rem
相似,依赖于当前字体和字体大小。然而,与 em
和 rem
不同的是,这两个单位只也依赖于 font-family
,因为它们被定为基于特殊字体的法案。
ch
单位,或者字符单位被定义为 0
字符的宽度的“先进的尺寸”。在 "Eric Meyer's的博客" 中可以找到一些非常有趣的讨论关于这意味着什么,但是基本的概念是,给定一个等宽字体的字体,一个N个字符单位宽的盒子,比如 width:40ch;
,可以一直容纳一个有 40
个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关,但是这里创造性的可行性一定会超越这些简单的用途。
ex
单位被定义为"当前字体的 x-height
或者一个 em
的一半"。给定的字体的x-height
是指那个字体的小写 x
的高度。通常,这是这个字体的中间的标志。
x-height:小写字母x的高度(阅读更多关于 )
对于这种单位有很多的用途,大多数是用于排版的微调。例如, sup
元素,代表 上标 ,可以用相对定位和一个 1ex
的底部值在行内被推高。类似地,你可以拉低一个下标元素。浏览器默认支持这些利用上标和下标特性的 vertical-align
规则,但是如果你想要更精细的控制,你可以像这样更明确的处理样式:
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
ex
单位在 CSS1 中已经存在,但是你不会找到对 ch
单位有像这样坚实的支持。具体支持,在Eric Meyer’s 的博客中查看 CSS单位和值 。
结论
密切关注CSS的持续发展和扩张是非常重要的,一边在你的工具集里知道所有的工具。也许你会遇到一个特殊的问题需要一个意想不到的解决方案,利用这些更隐蔽的计量单位之一。花时间去阅读新规范,记录来自好的资源的新闻资讯!
扩展阅读
- Taking the “Erm..” Out of Ems
- Taking Ems Even Further
- Caniuse Viewport units
- CSS的font-size属性
- Rem VS Px
- CSS的长度单位
- CSS3的REM设置字体大小
- CSS中强大的EM
本文根据 @Jonathan Cutrell 的《 7 CSS Units You Might Not Know About 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573 。
七个你可能不了解的CSS单位的更多相关文章
- 你可能没注意的CSS单位
扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...
- css单位盘点
css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...
- 你可能不知道的7个CSS单位
如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- css单位分析、颜色设置与调色板
CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...
- CSS:CSS 单位
ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如, ...
- rem — 一个低调的css单位
原文 http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...
- css单位中px和em,rem的区别
css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...
- CSS单位计算总结
CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...
随机推荐
- 使用oschina的git服务器
初始配置 用注册的用户名和邮箱配置git config,这个信息不一定是你在网站注册的内容. git config --global user.name "" git config ...
- jsPlumb
官网:https://jsplumbtoolkit.com GitHub:https://github.com/sporritt/jsplumb/ 初始化 jsPlumb只有等到DOM初始化完成之后才 ...
- QT之实现程序启动画面
现在好多软件都有,尤其是大型软件,他们要加载的东西太多,因此需要的事件较长,而又不希望给用户产生成为好像没有响应的情况,因此也就需要程序启动画面来实现. 当然了,用widget要比这个丰富很多,不过代 ...
- Python进阶04 函数的参数对应
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经接触过函数(function)的参数(arguments)传递.当时我们根 ...
- Android开发者需要面对的8大挑战
移动开发变得越来越受欢迎,但移动开发者正面临着一系列挑战.本文将介绍的是Android开发者需要面对的8个不利因素,例如缺乏硬件标准化,以及软件碎片.为Android OS开发app,给予了开发人员极 ...
- webim-界面细节调整
1)左侧css调整 3)界面和滚动条美化 8)界面
- CentOS7 安装Redis 3.2.3
$ wget http://download.redis.io/releases/redis-3.2.3.tar.gz $ tar xzf redis-3.2.3.tar.gz $ cd redis- ...
- C API 连接MYSQL
#include <iostream> #include <mysql.h> #include <string> #include <assert.h> ...
- MyEclipse运行时自动保存
今天第一次用MyEclipse,我发现我的代码明明修改了,但运行结果发现总是修改前的代码结果.后来发现,是代码修改后必须保存,再点运行.这个功能明显不合适,所以需要更改MyEclipse的配置.红框是 ...
- gomoblie flappy 源码分析:游戏逻辑
本文主要讨论游戏规则逻辑,具体绘制技术请参看相关文章: gomoblie flappy 源码分析:图片素材和大小的处理 http://www.cnblogs.com/ghj1976/p/5222289 ...