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

1. CSS长度单位：

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

相对长度单位包括有：
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
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
min device

详细参考：
http://www.css88.com/book/css/properties/media-queries/index.htm

各种设备值：
http://www.w3school.com.cn/tags/att_link_media.asp