当前位置：首页 > 资讯 > 系统环境 > windows

5种前台新手必知的新型的CSS长度单位！

时间：2020-11-08 01:59 作者：程序员的青春来源：阅读：347
扫一扫，手机访问

摘要：众所周知CSS技术我们尽管很熟习，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新处理方案的要求也会不断增长。因而，作为网页设计师和前台开发人员，我们别无选择，必需熟习我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货

众所周知CSS技术我们尽管很熟习，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新处理方案的要求也会不断增长。

因而，作为网页设计师和前台开发人员，我们别无选择，必需熟习我们手上的工具，做到知己知彼，这样才能百战不殆。

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

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

1、rem

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

你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。

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

尽管在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们即可以使用 rem 了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是<html>元素了。

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

2、适用于网格布局

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

概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。

3、vh and vw

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

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

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

假设你要来一个和屏幕同宽的标题，你只需设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有？！

4、vmin and vmax

vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者者最大值。比方，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。

假如宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

那么问题来了，我们应该在什么场景下使用这两个单位呢？

假设有一个元素，你需要让它始终在屏幕上可见。

只需对其高度和宽度使用vmin单位，并赋予其低于100的值即可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：

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

5、ex and ch

假如大家对于学习web前台有任何疑问（学习方法，学习效率，如何就业），可以随时来咨询我，这是我的web前台交流学习裙：前面是六零三，中间九八五，最后九九三，多多交流问题，互帮互助，群里有学习教程和开发工具

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;实现。

相似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用

上标和下标特定垂直对齐规则，但是假如你想更细粒度更准确得控制，你可以像下面这样做：

自己是从事了8年的前台工程师，自己整理了一份最全面前台学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，有想学习web前台的，或者是转行，或者是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，这是我的前台开发qun，【六零三】【九八五】【九九三】，直接群里下载，对于学习web前台有任何疑问（学习方法，学习效率，如何就业）都可以问我，最后可以点一波关注哟！

结论

持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的一律技能。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来处理。