css中的尺寸和单位

前言

本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn

<length>类型

length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, margin, font-size,text-shadow等属性, css的length类型分为绝对单位和相对单位

相对单位

相对单位代表以其他距离为尺寸的一种单位，包括em，rem，ex，lh，rlh。这几个单位没什么好说的，不知道自己查文档。我主要来说下和视口相关的几个相对单位的使用：vw，vh，vi，vb，vmax，vmin
提出中文mdn文档的一个错误： 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值，只有基于Gecko的浏览器才能动态更新视口值，可以测试一下，说法并不正确:
经测试在chrome, IE7以上都是正常的，中文文档误人:-D

    window.onresize = function () {
        console.log(document.documentElement.clientWidth || document.body.clientWidth);
    }

指出中文mdn文档的另外一个错误如果html和body设置了overflow:auto，滚动条占据的空间不会从视口中减去（译者注：大概就是说会算在视口里，视口大小是包括滚动条的），但当设置为overflow:scroll时，滚动条占据的空间反而会从视口中减去（译者注：大概就是此时视口大小不包括滚动条）。, 明显又是一个误导:-D。英文文档里没有这两点，英文不好的话，就中英文一块看吧

1. vi和vb，vi是沿着包含块的内联轴方向尺寸的1%，vb是沿着包含块的块轴方向尺寸的1%
   对这两个单位的兼容性比较差，基本在所有浏览器上都不兼容。但是这两个单位引出了两个比较有趣的概念包含块和块轴，内联轴
2. vh和vw，视口高度的1%和视口宽度的1%。可用来做可伸缩布局，但是兼容性没有rem好。所以目前还是rem布局居多，vh和vw看到网易新闻有用到vw设置字体大小，不知道目的何在，不过vw确实可以用来做移动端布局
3. vmin，vmax, 视口宽度和高度之间的最小值的1%，视口宽度和高度之间的最大值的1%

绝对单位

绝对单位包括px，pt，in, mm, cm等。绝对单位这种翻译容易造成误解。比如《css编程指南》中对于绝对单位的描述：绝对单位其实也是一种相对单位，?，是不是有点懵逼！！！如果你明白设备像素和设备独立像素的概念，就会觉得这也能说通。
简言之，css样式中设置的像素都是设备独立像素。公式：dpr = 设备像素 / 设备独立像素。我们知道设计稿给出的一般是设备像素。那么设计稿到css样式：设备独立像素 = 设备像素 ／ dpr，设备独立像素用于我们的css布局中，so easy，前端入门知识。出两个面试题。

• 高分辨率屏幕下实现1px边框
• 同一台设备上1in, 96px, 72pt分别设置三行字体，哪行字体显示的最大？

有的设计师的设计稿给出的就是pt为单位的。大部分设计师都是给出设备像素的设计稿，需要我们自己换算成css，毕竟我们是专业的，ue不懂这些东西。
好啦，进入正题，从mdn中抄了这么一段描述：

• 1in 总是（等于）96px
• 3pt 总是（等于）4px
• 25.4mm 总是（等于）96px

我们经常看到有的博客说:高分辨率的显示器，ppi(pixel per inch)更大，可是上面又说1in = 96px总是成立的，跟分辨率无关，哈哈，是不是冲突？no！ppi的第一个p指的是设备像素，1in = 96px = 72pt = 25.4mm这个始终成立的，px指的是设备独立像素。所以呢，第二个问题的答案：三行字体在同一台设备上一样大小。

总结

总结了css中尺寸和长度的单位。相对单位和绝对单位。讲相对单位的时候引出了‘包含块’的概念，对于绝对单位，引出了绝对单位间的换算关系，设备像素和设备独立像素的概念。所以呢，相对单位最终还是要转换为绝对单位px，然后在网页中进行布局。px本身只是设备独立像素，它也是一个相对单位。那么我可以说css中所有的长度单位都是相对单位么？之前看到有人这样理解。时间仓促，自己的理解也不一定正确，欢迎留言评论，指出错误。谢谢！