meface/css_unit.md at 69b97ea4da2f31a8bb348c9062940564877a5fed

6.2 KiB

Raw Blame History

title

date

author

CSS 长度单位

不知你是不是只会用px屏幕像素单位来定义你的DOM元素，始终固定来元素的大小，在面对浏览器缩放的时候，显得元素特别别扭，没有响应式的效果。今儿，来学习总结一下CSS中的尺寸单位，来解决这个问题。

长度单位的类型：

相对长度单位：
- 文本相对长度：em,ex,ch,rem
- 视口相对长度：vh,vw,vmax,vmin
绝对长度单位：cm厘米,mm毫米,q1/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元素都是从它上一级父元素继承大小，并且逐渐增大。

如果不想考虑嵌套问题，可以使用rem。rem中的r是root的意思，页面的根元素是<html>元素。当存在嵌套时，就不会出现类似套娃一样情况。如果html元素没有设置font-size属性时，会使用页面的默认值16px。

vh 和 vw

响应式Web设计离不开百分比。但是，CSS 百分比并不是所有问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父级元素的宽度。但是如果你就想要视口（viewpoint）的宽度或高度，而不是父元素的时候可以使用vh和vw。

先来了解一下视口是什么

视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围，且PC端和移动端视口差别很大。

PC端：视口宽度始终与浏览器窗口宽度一致；
移动端：视口宽度与浏览器窗口完全独立。

在PC端，视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。

在移动端，视口分为三类：布局视口、视觉视口，完美视口

布局视口

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。下面通过图1演示什么是布局视口。

当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这个时候会出现左右滚动条。

document.documentElement.clientWidth	//布局视口的宽度
document.documentElement.clientHeight  	//布局视口的高度

视觉视口

视觉视口是指用户正看到的网页区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。同时大小也等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。

window.innerWidth  //视觉视口的宽度
window.innerHeight //视觉视口的高度

完美视口

布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。

<meta name="viewport" content="width=device-width">

将布局视口的宽度设置为设备独立像素的宽度，这样就不会出现横向滚动条，通过如下代码可以获取设备独立像素的尺寸。

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

6.2 KiB Raw Blame History Unescape Escape