一、媒体类型
all 所有媒体
screen 彩屏设备
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
braille 应用于盲文触摸式(已废弃 )
embossed 用于打印的盲人印刷设备(已废弃 )
projection 用于投影设备(已废弃 )
tty 不适用像素的设备(已废弃 )
tv 电视(已废弃 )
二、关键字
and 并且 连接条件
not 用来排除某种制定的媒体类型
only (限定某种设备)某种特定的媒体类型
三、媒体特性
( width:600px ) 宽
( max-width:600px ) 最大宽度 <=600
( min-width: 480px ) 最小宽度 >=480
( orientation:portrait ) 竖屏
( orientation:landscape ) 横屏
四、媒体查询
1、方式一 媒体查询: @media [not|only] mediatype [and] (media feature) { CSS-Code; }
@media screen and (min-width:400px) and (max-width:500px) {.bo x {margin: 0 auto;}}
//值与值之间需要有空格
2、 方式二: @import url(‘index.css’) [not|only] mediatype [and] (media feature) [and] (media feature); 需顶行写
@import url(style.css) screen and (min-width:1000px);
3、方式三:样式引入
<link rel="" type="" href="A.css" media="screen and (min-width: 800px)">
<link rel="" type="" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="" type="" href="C.css" media="screen and (max-width: 600px)">
<link rel='stylesheet' media='all and (orientation:portrait)' hre f='portrait.css'>
<link rel='stylesheet' media='all and (orientation:landscape)' hr ef='landscape.css'>
<link rel='stylesheet' type='text/css" media="print" href='prin t.css' />
五、viewport视口
视口的作用:在移动浏览器中,当页面宽度超 出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示width [pixel_value | devicewidth] 例如width = 640
height [pixel_value | deviceheight]
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
user-scalable 是否允许缩放 (yes || no 或 1 | 0)
兼容
Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高 级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的 标准模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代码强制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用户安装 Google Frame
最佳的兼容模式方案,结合考虑以上两种:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
六、设置视口
做响应式网站的时候,一定要在页面头部加入如下的声明:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">