--- title: 'CSS 长度单位' date: 2020-10-23 author: ac tags: - CSS categories: - Web --- ## CSS 长度单位 > 不知你是不是只会用`px`屏幕像素单位来定义你的`DOM`元素，始终固定来元素的大小，在面对浏览器缩放的时候，显得元素特别别扭，没有响应式的效果。今儿，来学习总结一下`CSS`中的尺寸单位，来解决这个问题。 长度单位的类型： - 相对长度单位： - 文本相对长度：`em`,`ex`,`ch`,`rem` - 视口相对长度：`vh`,`vw`,`vmax`,`vmin` - 绝对长度单位：`cm`厘米,`mm`毫米,`q`1/4毫米,`in`英尺,`pt`点,`pc`派卡,`px`像素 1 in = 2.54 cm，1 pt = 1/72 in，1 pc = 12 pt ，1 px = 1/96 in | 单位 | 版本 | 描述 | | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | | `vw` | CSS3 | 相对于视口的宽度，视口被均分为100单位的 `vw` | | `vh` | CSS3 | 相对于视口的高度，视口被均分为100单位的 `vh` | | `vmax` | CSS3 | 相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax | | `vmin` | CSS3 | 相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin | | 单位 | 版本 | 描述 | | ----- | ---- | --------------------------------------------- | | `em` | CSS1 | 相对于当前对象内文本的字体尺寸 | | `rem` | CSS3 | 相对于根元素(即html元素)font-size计算值的倍数 | | `ex` | CSS1 | 相对于字符“x”的高度。通常为字体高度的一半 | | `ch` | CSS3 | 数字“0”的宽度 | ### 举栗子时间 #### em和rem `em` 定义为相对当前对象（父节点）内容文本的字体尺寸，如给body元素设置了font-size，那么body元素的任何子元素（孙子节点不算）的1 em 就是body设置的font-size大小。当em存在嵌套时，每个div元素都是从它上一级父元素继承大小，并且逐渐增大。 ![image-20201023103205915](../images/image-20201023103205915.png) 如果不想考虑嵌套问题，可以使用`rem`。`rem`中的`r`是`root`的意思，页面的根元素是``元素。当存在嵌套时，就不会出现类似套娃一样情况。如果`html`元素没有设置font-size属性时，会使用页面的默认值`16px`。 ![image-20201023104338131](../images/image-20201023104338131.png) #### vh 和 vw 响应式Web设计离不开百分比。但是，`CSS` 百分比并不是所有问题的最佳解决方案。`CSS`的宽度是相对于包含它的最近的父级元素的宽度。但是如果你就想要视口（viewpoint）的宽度或高度，而不是父元素的时候可以使用`vh`和`vw`。 **先来了解一下视口是什么** 视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围，且PC端和移动端视口差别很大。 - PC端：视口宽度始终与浏览器窗口宽度一致； - 移动端：视口宽度与浏览器窗口完全独立。 在PC端，视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。 在移动端，视口分为三类：布局视口、视觉视口，完美视口 **布局视口** 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。下面通过图1演示什么是布局视口。 ![20200910162534756](../images/20200910162534756.png) 当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这个时候会出现左右滚动条。 ```javascript document.documentElement.clientWidth //布局视口的宽度 document.documentElement.clientHeight //布局视口的高度 ``` **视觉视口** 视觉视口是指用户正看到的网页区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。同时大小也等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。 ![20200910162647164](../images/20200910162647164.png) ```javascript window.innerWidth //视觉视口的宽度 window.innerHeight //视觉视口的高度 ``` **完美视口** 布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。 ```html ``` 将布局视口的宽度设置为设备独立像素的宽度，这样就不会出现横向滚动条，通过如下代码可以获取设备独立像素的尺寸。 ![20200910162708498](../images/20200910162708498.png) ```javascript screen.width //设备独立像素宽度 screen.height //设备独立像素高度 ``` 回到`vh`和`vw` 1 `vh`等于1/100 的视口高度（浏览器高度）。 `vmin` 和 `vmax` `vh`和`vw`是依据视口的高度和宽度，而`vmin`和`vmax`则是关于视口高度和宽度的最小值和最大值。 ### 参考文献 [1] HTML中文 https://www.html.cn/book/css/values/length/index.htm [2] WEB骇客 https://www.webhek.com/post/7-new-css-units.html [3] CSS—viewport视口详解 https://blog.csdn.net/weixin_42472040/article/details/104158020 [4] 布局视口、视觉视口和理想视口分别是什么 http://www.itheima.com/news/20200910/171437.html