CSS长度单位 和 CSS响应式（媒体查询）(1)

---

长度单位包括包括：相对单位和绝对单位。.

相对长度单位包括有：

px,em, ex, ch, rem, vw, vh, vmax, vmin,%

px(像素), em(元素), %(百分比), ex(元素的一半), ch(数字0的宽度), rem(相对根元素的元素单位),

vw(视口宽度), vh(视口高度), vmax(取视口宽高中较大的), vmin(取视口宽高中较小的)

其中：ch,rem,vw,vh,vmax,vmin是CSS3新增加的。

绝对长度单位包括有：

cm, mm, q, in, pt, pc

cm(厘米), mm（毫米）, q(1/4毫米), in(英寸), pt(点), pc(派卡)

注：绝对长度单位一般不常用，只有在打印时有可能会使用。

常用长度单位和不常用长度单位:

常用长度单位：PC端常用长度单位和移动端常用长度单位

PC端常用长度单位：

px:pixel像素单位，相对单位，

em:element元素单位,相对单位，指相对于父元素的大小，如果父元素的字体大小是16px,默认情况下1em=16px

%:百分比单位。

移动端常用长度单位：

px,em,%,rem,vh,vw,vmax,vmin

• px 相对长度单位。像素（Pixels）。

• em 相对长度单位：相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

即1em=16px

• ex 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半,默认(同上)1ex=8px

• ch 数字“0”的宽度

• rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

_rem与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。_

• vw 相对于视口的宽度。视口被均分为100单位的vw

如果视口的宽度是200mm，那么上述代码中(font-size: 8vw;)h1元素的字号将为16mm，即(8x200)/100

vh 相对于视口的高度。视口被均分为100单位的vh(同上)

• vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

h1 {font-size: 8vmax;}

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。

vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

h1 {

font-size: 8vm;

font-size: 8vmin;

}

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

cm 厘米（Centimeters）。绝对长度单位。

mm 毫米（Millimeters）。绝对长度单位。

q 1/4毫米（quarter-millimeters）。绝对长度单位。

in 英寸（Inches）。绝对长度单位。

pt 点（Points）。绝对长度单位。

pc 派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

单位相关详细参考：

http://www.css88.com/book/css/values/index.htm

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
*

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！