rem

我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设置的font-size。

  body {

    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
 
你看,这里div的字体大小是1.2em。解释来说,就是他从body那里继承的字体大小(这里是14px)的1.2倍,结果就是16.8px。

但是,如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS,每一个div都从它上一级父元素继承了字体大小,并且逐渐得增加。

 
例子
虽然在某些地方这正是我们想要的,但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛,我们就可以使用

rem 了。‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是元素了。

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}
 

这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。

适用于网格布局

Rems 不仅仅只是在设置字体大小上很方便。你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位,然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性,

.container {
    width: 70rem; // 70 * 14px = 980px
}
 
 

vh and vw

响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。

1vh 等于1/100的视口高度。栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度未750, 1vw = 750px/100 = 7.5 px。

可以想象到的,他们有很多很多的用途。比如,我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide {
    height: 100vh;
}
假设你要来一个和屏幕同宽的标题,你只要设置这个标题的font-size的单位为vw,那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果,有木有?!
 

vmin and vmax

vh和 vm 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 1px, 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

那么问题来了,我们应该在什么场景下使用这两个单位呢?
假设有一个元素,你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位,并赋予其低于100的值就可以做到了。再来个栗子,可以这样定义一个至少有两个边触摸到屏幕的方形:

.box {
    height: 100vmin;
    width: 100vmin;
}

如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)

.box {
    height: 100vmax;
    width: 100vmax;
}
 

结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。

ex and ch

ex 和 ch 单位,类似于 em 和 rem, 依赖于当前的字体和字体大小。 但是,不同的是,这两货是基于字体的度量单位,依赖于设定的字体。

ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论,例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版,但是除此之外,肯定还有可以应用他的地方。

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。 很多时候,它是字体的中间标志。

x-height; the height of the lower case x

这些单位有很多用途,大部分用于版式的微调。比方说,sup 元素(上角文字标),可以通过position:relative;bottom:
1ex;
实现 。类似的方法,你可以实现一个下角文字标。浏览器默认的方式是利用
上标和下标特定垂直对齐规则,但是如果你想更细粒度更精确得控制,你可以像下面这样做:

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

原文地址:http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html

rem vh vw vmin vmax ex ch的更多相关文章

  1. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  2. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  3. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  4. 关于CSS单位:rem vh vw vmin vmax

    rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body {  font-size: ...

  5. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  6. CSS3中的px,em,rem,vh,vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  7. CSS3中的px,em,rem,vh,vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  8. vw、vh、vmin、vmax、em、rem的使用详解

    转载自:https://blog.csdn.net/ZNYSYS520/article/details/76053961 1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vma ...

  9. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

随机推荐

  1. linux之SQL语句简明教程---ALTER TABLE

    在表格被建立在资料库中后,我们常常会发现,这个表格的结构需要有所改变.常见的改变如下: 加一个栏位 删去一个栏位 改变栏位名称 改变栏位的资料种类 以上列出的改变并不是所有可能的改变.ALTER TA ...

  2. 【LeetCode练习题】Multiply Strings

    Multiply Strings Given two numbers represented as strings, return multiplication of the numbers as a ...

  3. UbuntuOpenStack core componennts

    <1,keystone安装配置> 1,yum -y install openstack-keystone python-keystoneclient; 2,配置实用mysql存储keyto ...

  4. PyCharm设置字体

    pycharm 是很好的一个IDE,就是默认字体太小了,真的太小了,改字体的地方很隐晦.找了半天,贴图: 然后发现size 不能更改,所以,点击save as创建一个方案,然后修改自己的方案.这个时候 ...

  5. 关于VMware导入Linux VM找不到网卡的问题

    今天遇到一个问题:由于虚拟机升级,导致以前的Linux VM(CentoS 6.7)在新的VMware里面打开,系统提示找不到网卡的问题,在网上找了好多解决办法,基本上都是一样的答案. 与网卡有关的几 ...

  6. Sereja and Coat Rack(水)

    Sereja and Coat Rack Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  7. 利用maven中resources插件的copy-resources目标进行资源copy和过滤

    maven用可以利用如下配置进行资源过滤,pom.xml的配置如下: <build> <!-- 主资源目录 --> <resources> <resource ...

  8. css overflow

    overflow-x,overflow-y的值相同等同于overflow overflow-x,overflow-y的值不同,其中一个被赋值visible,另一个被赋值为auto,scroll,hid ...

  9. android系统将普通应用升级为系统应用

    作为一名程序员,有的时候并不是使用软件,而是去改造软件,不仅仅只是会编程而已,还要满足客户的需求.这样,才能开发出符合客户需求的应用,在关于到涉及到android底层的应用的时候,手机就需要root了 ...

  10. iOS极光推送

    昨天花了一下午的时间研究了下极光推送,也前也是没做过,不知道从何下手!才开始的时候一看官方的SDK感觉好难,不过经过一系列的捣鼓之后,手机收到了推送信息,感觉其实并没有那么难! 1.配置开发证书(得有 ...