开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十五天,点击查看活动详情

深入解析css(第二天)

在css中用到最多的莫过于单位,px,em,rpx,upx,rem,uem,vh,vw等等各种各样的元素单位,但是比较多的人可能还不了解他们分别代表什么,或者不知道什么时候用哪一种单位更好,这篇文章将讲解各个元素单位!!!

px

像素，一个像素就是你在计算机显示器上看到的一个点。相对单位，取决于显示设备的分辨率。这个应该是我们用的最多的,也是我们比较常见的第一个单位,但是它有一个比较严重的弊端就是他是固定值,不适用于适配

em

如果直接用定义来说就是默认字节大小,也就是如果默认字节大小为16px,那么1em等价于16px,但是它真正的定义是1em等于当前对象的父类的字体大小,也就是说如果div的字体大小为20px,那么div的子类如果使用1em的话,那1em=20px,但是这里我可能会好奇一点,**如果body设置1em,他的大小应该是多大?**我们直接实操

我们可以看到如果body是1em的话,他的大小还是16px,也就是还是默认字体大小,这是为什么? 这是因为body继承了浏览器的字体大小16px

rem

m用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂。值得庆幸的是，我们有更好的选择：rem。rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。也就是说1rem永远等于根元素的字体大小单位.用rem设置字号，用px设置边框，用em设置其他大部分属性。

vh

不出意外,这个或许是很多学css都比较了解的一个东西,特别是居中啊,或者整个页面或者适配等等场景都可能会用到vh,那vh是什么?相对长度单位。是相对视口的高度，而不是父元素的。它会根据当前窗口大小而随机修改样式的高度

vw

有相对视口的高度,必然也有其对应的相对视口的宽度,它的作用和vh差不多不过是用在宽度上的

vmin和vmax

相对长度单位。是关于视口宽度和高度的两者中的最小值和最大值。

例如：浏览器宽度是 1200px，高度是 900px。那么1vmin = 900px/100 =9px，1vmax=1200px/100=12px

如果想让元素在整个窗口内可见，可以将宽度和高度均设置为100vmin；如果想让元素铺满整个屏幕的可见区域，可以将宽度和高度均设置为100vmax。

关于vh和vw的小总结

我发现用vw来设置字号是非常非常实用的,特别是适配时,如果给一个元素加上font-size: 2vw会发生什么？在一个1200px的桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板上，计算值约为15px（768的2%）。这样做的好处在于元素能够在这两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。但是有时设置的太大对某些特定的环境下还是比较不理想的,所以可能我们用到一个计算函数calc

calc

css3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

也可以配合vh,vw等等地方实用,达到我们想要的结果

定义字号

现在打开网页，慢慢缩放浏览器，字体会平滑地缩放。0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。这段代码保证基础字号从iPhone 6里的11.75px一直过渡到1200px的浏览器窗口里的20px。可以按照自己的喜好调整这个值。