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

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

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

常用长度单位：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

http://www.w3school.com.cn/cssref/css_units.asp

http://www.runoob.com/cssref/css-units.html

像素相关：

https://baike.baidu.com/item/像素/95084?fr=aladdin

https://baike.baidu.com/item/分辨率/213523 分辨率

https://baike.baidu.com/item/图像像素/10689614 图像像素

https://baike.baidu.com/item/像素图/773140?fr=aladdin

https://wenku.baidu.com/view/56a1c4d433d4b14e8524682a.html 图像像素，分辨率的含义及其关系

2. CSS响应式：媒体查询

---

@media screen and (max-width: 800px) {

.container{

border: 1px solid red;

}

}

bootstrap天生就支持响应式。

所有浏览器都支持值为 “screen”、“print” 以及 “all” 的 media 属性。

orientation：portrait | landscape

portrait： 指定输出设备中的页面可见区域高度大于或等于宽度

landscape： 指手机横屏，除portrait值情况外，都是landscape

maxwidth minwidth

max device