137 lines
6.2 KiB
Markdown
137 lines
6.2 KiB
Markdown
|
---
|
|||
|
|
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元素都是从它上一级父元素继承大小，并且逐渐增大。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
如果不想考虑嵌套问题，可以使用`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端浏览器那样完美地展示网页，这正是布局视口存在的问题。这个时候会出现左右滚动条。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
document.documentElement.clientWidth //布局视口的宽度
|
|||
|
|
document.documentElement.clientHeight //布局视口的高度
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**视觉视口**
|
|||
|
|
|
|||
|
|
视觉视口是指用户正看到的网页区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。同时大小也等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
window.innerWidth //视觉视口的宽度
|
|||
|
|
window.innerHeight //视觉视口的高度
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**完美视口**
|
|||
|
|
|
|||
|
|
布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<meta name="viewport" content="width=device-width">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
将布局视口的宽度设置为设备独立像素的宽度，这样就不会出现横向滚动条，通过如下代码可以获取设备独立像素的尺寸。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```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
|