Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

7个你可能不认识的CSS单位 #1

Open
simaQ opened this issue Nov 11, 2014 · 26 comments
Open

7个你可能不认识的CSS单位 #1

simaQ opened this issue Nov 11, 2014 · 26 comments
Assignees
@simaQ

Comments

@simaQ
Copy link
Owner

simaQ commented Nov 11, 2014

译：Emma (https://github.com/simaQ)
【如有雷同纯属巧合；如要转载，请注明出处(虽然概率接近于0)】

注： 原文链接 7 CSS Units You Might Not Know About

众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。
随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。

这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。

今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！就让我们一起来交个朋友吧~

rem

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

<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。解释来说，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是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 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是<html>元素了。

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和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了，我们应该在什么场景下使用这两个单位呢？
假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：

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

1

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

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

2

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

ex and ch

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

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

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

3
x-height; the height of the lower case x

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

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

结论

持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的全部技能。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，类似 cssweekly这样的。 当然不要忘记现在就去注册像TUTS +这样的网站来获取每周的更新，课程，免费教程还有资源！

扩展阅读
More CSS unit goodness.
@simaQ simaQ self-assigned this Nov 11, 2014
Repository owner locked and limited conversation to collaborators Nov 12, 2014
Repository owner unlocked this conversation Nov 13, 2014
@yongbo000
Copy link

顶顶顶～～顶你啊 飞哥

@zhangyuheng
Copy link

💯

@xiaoda
Copy link

xiaoda commented Nov 15, 2014

兼容性方面怎么样呢？

@tthallos
Copy link

👍

@lifesinger
Copy link

顶呀，以前只知道 rem，看到 vh、vw 等，长见识了。

可以再说说当前在哪些浏览器上已经实现了，以及实际使用时需要注意什么。

@simaQ
Copy link
Owner Author

simaQ commented Nov 17, 2014

浏览器的兼容情况如下：

rem

  • IE8以下（包含IE8）不支持
  • 其他主流浏览器都支持ff chrome safari Opera;
  • 移动端的话，IOS Safari, Android 也都支持

vw vh vmax vmin

  • IE8以下（包含IE8）不支持
  • 在IE9中使用vm来代替vmin
  • IE10, IE11不支持vmax
  • 其他主流浏览器都支持ff chrome safari Opera都支持

ex

  • PC浏览器都支持

ch

  • ie8 及以下不支持

@lilinchun1
Copy link

vm vh vmax vmin在手机上支持咋样？

这个基本都支持了的。你可以看一下这个网址：
http://caniuse.com/#search=vh

@dwqs
Copy link

dwqs commented Nov 21, 2014

赞

@xiao-T
Copy link

xiao-T commented Mar 28, 2016

比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。

这句是不是有问题呢

@lisaRao
Copy link

lisaRao commented Mar 28, 2016

@xiao-T
这句是有问题，

浏览器的宽度设置为1100px，高度设置为700px

那么 1vmin = 7px, 1vmax= 11px

@EricHu1992
Copy link

赞

@GitChow
Copy link

GitChow commented Aug 30, 2016

点赞

@RobinZhao00
Copy link

NB

@s2011great
Copy link

学习了，以前还真不知道，css有这么多单位。

@ghost
Copy link

ghost commented Jun 6, 2017

学习啦

@tcitds1
Copy link

tcitds1 commented Aug 19, 2017

学到了 赞

@LinXiaoBao
Copy link

vh与flex结合起来用于做Sticky footer很方便
body {
display: flex;
flex-flow: column;
min-height: 100vh; }
main { flex: 1; }
原文: https://www.w3cplus.com/css3/css-secrets/sticky-footers.html © w3cplus.com

@tiankai0426
Copy link

楼主，可以引用你的文章吗，注明转载出处 @simaQ

@xudafeng
Copy link

给飞哥点个赞

@fattypiggy
Copy link

受教

@HuangHongRui
Copy link

image
👍

@Chan-Chun
Copy link

久闻飞哥大名~

比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。

这里好像写错了？没看懂

@zhoubhin
Copy link

@Chan-Chun 应该是1vmin = 7px, 1vmax= 11px；
楼上的 @lisaRao 已经指出。

@Hanslen
Copy link

Hanslen commented Apr 18, 2018

学习了！

@JasonHan0929
Copy link

JasonHan0929 commented Jun 19, 2018 •
edited
Loading

感谢翻译！发现一个小问题，第一句话的stuck应该是词组stick with sth表示坚持做什么事，而不是卡住的意思。所以第一句话应该是说如果你一直坚持用你都会的那些css，那么出现新问题的时候对我们就很不利了。楼主看一下是不是这样～

@guoyunliang123
Copy link

兼容性方面怎么样呢？

兼容性问题可以去Can I use上查看

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@simaQ simaQ

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests