长度单位包括包括:相对单位和绝对单位。.
相对长度单位包括有:
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 图像像素,分辨率的含义及其关系
@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