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中全部的长度单位都是相对单位么？以前看到有人这样理解。时间仓促，本身的理解也不必定正确，欢迎留言评论，指出错误。谢谢！