前言本文主要介绍css的大小和单位，特地查了一下mdn，补充了一些自己的理解。本文参考mdn类型length的css数据格式来表示距离大小，由value+unit组成。如果值为0，则可以省略单位。比如width,height,margin,font-size,text-shadow等属性，css的长度类型分为absoluteunit和relativeunitrelativeunitrelativeunit表示一个以其他距离为大小的单位，包括em,rem,ex,lh,rlh。这些单位没什么好说的，不知道怎么自己去查资料。我主要说一下与视口相关的几个相对单位的使用：vw、vh、vi、vb、vmax、vmin。中文mdn文档的一个错误：修改视口大小时（通过改变桌面电脑窗口的大小或旋转手机或平板设备的方向），只有基于Gecko的浏览器可以动态更新视口值,只有基于Gecko的浏览器才可以动态更新viewport值,可以测试一下,说法不对:在chrome测试,IE7以上都正常,中文文档误导:-Dwindow.onresize=function(){console.log(document.documentElement.clientWidth||document.body.clientWidth);}指出中文mdn文档中的另一个错误如果html和body设置了overflow:auto，滚动条占用的空间不会从viewport中减去当overflow:scroll时，滚动条占用的空间会而是从视口中减去（译者注：此时可能视口大小不包括滚动条），显然是另一个误导:-D。英文文档中没有这两点。英文不好就中英文看vi和vb就可以了。vi是沿包含块的内联轴大小的1%，vb是沿包含块的块轴的大小。1%对这两个单位的兼容性很差，在所有浏览器上基本不兼容。但是这两个单位引出了两个更有趣的概念，包括块和块轴、内联轴vh和vw、1%的视口高度和1%的视口宽度。可用于可伸缩布局，但兼容性不如rem。所以目前大部分都是rem布局。vh和vw看到网易新闻有用vw设置字体大小。不知道是什么目的，但是vw确实可以用于移动端布局vmin，vmax，视口宽高之间的最小值的1%，视口宽高之间最大值的1%绝对单位绝对单位包括px、pt、in、mm、cm等。绝对单位这种翻译是有误导性的。比如《css编程指南》中对绝对单位的描述：绝对单位其实是相对单位，?，是不是有点乱！！！如果您了解设备像素和与设备无关的像素的概念，这也很有意义。总之，css样式中设置的像素都是设备无关像素。公式：dpr=设备像素/设备独立像素。我们知道，设计稿一般都会给出设备像素。然后设计稿转css样式：deviceindependentpixel=devicepixel/dpr，deviceindependentpixel是我们css布局中使用的，soeasy，前端入门知识。有两道面试题。实现高分辨率屏幕下1px边框。在同一台设备上，设置三行字体分别为1in、96px、72pt。哪一行显示最大的字体？部分设计师的设计稿在pt中给出。大部分设计师给出的是设备像素的设计稿，需要我们自己转成css。毕竟我们是专业人士，这些东西ue是不懂的。好了，进入正题，从mdn上抄下这段描述：1in总是（等于）96px3pt总是（等于）4px25.4mm总是（等于）96px我们经常看到一些博客说：high-resolutiondisplay,ppi(pixelperinch)更大了，但是上面说的1in=96px总是成立的，不管分辨率如何，哈哈，是不是冲突了？不！ppi的第一个p指的是设备像素，1in=96px=72pt=25.4mm总是成立的，px指的是设备的独立像素。所以，第二个问题的答案：三行字体在同一台设备上是一样大小的。Summary总结了css中大小和长度的单位。相对单位和绝对单位。在谈到相对单位时，引入了“包含块”的概念。对于绝对单位，介绍了绝对单位之间的转换关系、设备像素和设备独立像素的概念。所以最后必须把相对单位转换成绝对单位px，然后在网页中布局。px本身只是一个与设备无关的像素，也是一个相对单位。那么我能说css中的所有长度单位都是相对单位吗？我以前见过有人这样做。时间短，我的理解可能不正确。欢迎大家评论指出错误。谢谢！
