JavaScript - CSS3

# CSS3 语法

1
2
3


@media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

# 标签

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放

# CSS2 对 media 的支持

CSS2 已经支持 Media 的用法, 但是只能在 head 标签中插入对应的 stylesheet link.

1
2
3


<link rel="stylesheet" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

# CSS3 @media

媒体类型 1.all 所有媒体 2.braille 盲文触觉设备 3.embossed 盲文打印机 4.print 手持设备 5.projection 打印预览 6.screen 彩屏设备 7.speech ‘听觉’类似的媒体类型 8.tty 不适用像素的设备 9.tv 电视
参数汇总 width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。 device-height:设备屏幕的高度。 orientation:检测设备目前处于横向还是纵向状态。 aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9) device-aspect-ratio:检测设备的宽度和高度的比例。 color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色） color-index:检查设备颜色索引表中的颜色，他的值不能是负数。 monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到） resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。 grid:检测输出的设备是网格的还是位图设备。

常用宽度设定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


@media screen and (min-width: 1200px) {
  css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
  css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
  css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
  css-code;
}
@media screen and (max-width: 479px) {
  css-code;
}

CSS3 相对 CSS2 写法的优势, 是 CSS 样式在同一个文件中, 减少了http请求资源的次数

# CSS3 不是生效时, 依次检查

CSS样式本身不正确
未在 head 标签中设置属性 viewport 属性.
格式错误, and 后面必须有空格 @media screen and {max-width: 200px){}
样式冲突, CSS 按顺序执行, 后面的样式会覆盖前面的样式
括号中的 CSS code 不能包括 ‘;’