1.媒体类型
媒体类型（Media Type)在CSS2中是一个常见属性，可以通过媒体类型对不同设备指定不同样式。
1.1 Media Type设备类型
- ALL:所有设备
- Braille：盲人用点子法触觉回馈设备
- Embossed:盲文打印机
- Handheld：便携设备
- Print：打印用纸或打印预览视图
- Projection:各种投影设备
- Screen：电脑显示器
- Speech：语音或音频合成器
- Tv：电视机类型设备
Tty：使用固定密度字母栅格的媒介，比如电传打字机和终端
Screen、All、Print为最常见的三种媒体类型。
1.2 媒体类型引用方法
- link方法
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />- xml方式
<?xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>- @import 方式
@import url(reset.css) screen;
@import url(print.css) print;
----------
<head>
<style type="text/css">
@import url(style.css) all;
</style>
</head>
- @meida 方式
@media是CSS3新引进的一个特性，媒体查询
@media screen {
/*styles here*/
}
----------
<head>
<style type="text/css">
@media screen {
selector: {
/*styles here*/
}
}
</style>
</head>
项目中常用第一种和第四种引入媒体类型的方法。
2.媒体特性
2.1 Meida Query和CSS属性集合
- Media Query只接受单个的逻辑表达式作为其值，或者没有值
- CSS属性用于声明如何表现页面信息；Media Query是一个用于判断输出设备是否满足某种条件的表达式
- Meida Query中的大部分接受min/max前缀，用来表达其逻辑关系，表示应用大于等于或小于等于某个值的情况
- CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种
2.2 CSS3中常用设备特性
没有特殊说明都支持Min/Max ，不支持Min/Max 用”N”表示
- color:整数，表示色彩的字节数
- color-index：:整数， 色彩表中的色彩数
- device-aspct-ratio:整数/整数，宽高比例
- device-height: Length 设备屏幕的输出高度
- device-width: Length 设备屏幕的输出宽度
- grid:整数 ，N，是否基于栅格的设备
- height:Length ,渲染界面的高度
- monochrome:整数 单色帧缓冲器中每像素字节数
- resolution: 分辨率（dpi/dpcm）分辨率
- scan:Progressive interlaced N ,Tv媒体类型的扫描方式
- width:Length 渲染界面的宽度
- orientation: Portrait//landscape N 横屏或竖屏
2.3使用方法
@media 媒体类型 and(媒体特性) {css style}使用Meida Query时必须要用@media开头，然后指定媒体类型，随后知道那个媒体特性（也叫设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分是媒体特性，第二部分为媒体特性所指定的值，中间用冒号隔开。
{max-width: 720px}Meida Query在实际项目中常用方式
最大宽度max-width:媒体类型小于或等于指定的宽度时，样式生效
@media screen and (max-width: 480px) { /*css styles*/ .ads { display: none; } }当屏幕小于等于480px时，广告区域隐藏
最大宽度min-width:媒体类型小于或等于指定的宽度时，样式生效
@media screen and (max-width: 900px) { /*css styles*/ .wrapper { width: 980px; } }当屏幕尺寸大于或等于900px时，容器宽度设为980px
多个媒体特性使用
and关键词将多个媒体特性结合在一起@media screen and (min-width:600px) and (max-width:900px) { /*css styles here*/ }设备输出宽度Device Width
在智能设备上，例如iphone,ipad等，还可以根据屏幕尺寸来设置相应的样式（或者调用相应的样式文件）。<link rel="stylesheet" media="screen and(max-device-width:480px)" href="iphone.css" />not关键字 排除某种指定的媒体类型
@meida not print and (max-width:: 1200px){/*styles*/}样式代码将被使用在处打印设备和屏幕宽度小于1200px的所有设备中。
only关键词
only是用来指定某种特定的媒体类型，也可以排除不支持媒体查询的浏览器。很多时候only是用来对不支持Media Query却支持Media Type的设备隐藏样式表。
例如支持媒体特性的设备会正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备就不会读取样式，因为先读取only而不是screen；不支持Media Query 的浏览器，不论是否支持only，样式都不会采用。
<link rel="stylesheet" media="only screen and(max-device-width:240px)" href="android620.css" />3.Responsive布局概念
Responsive设计为RWD（Responsive Web Design）,是提供各种设备都能浏览网页的一种设计方法，RWD能让网页在不同的设备中展现不同的设计风格，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。
3.1 设计特点
- 网页必须建立灵活的网格基础
- 引用到网站的图片必须是可伸缩的
- 不同的显示风格，需要在Media Query上设置不同的样式。
缺少上述任何一个条件，就不能称为合格的RWD。
3.2 Responsive术语
- 流体网格：流体网格是一个简单的网格系统，参考流体设计中的网格系统，将每个网格格子使用百分比来控制网格大小，好处是让网格随屏幕尺寸大小做出相对应的比例缩放。
- 弹性图片：不给图片设置固定尺寸，根据流体网格进行缩放，适用于各种网格的尺寸
img{max-width:100%} - 媒体查询
- 屏幕分辨率
主要断点：设备宽度的临界点。在Media Query中，媒体特性min-width和max-width对应的属性就是响应式设计中的断点值。
设置断点应把握- 满足主要断点
- 有可能的话添加一些别的断点
- 设置高于1024px的桌面断点
3.3 Responsive技巧
- 少用无关紧要的DIV
- 不要使用内联元素
- 少用JS或者Flash
- 丢弃没用的绝对定位和浮动样式
- 摒弃任何冗余结构和不适用100%设置
- 使用HTML5 Doctype和相关指南
- 重置好样式
- 语义化布局
- 给重要的网页元素使用简单的技巧
3.4 meta标签
<meta name="viewport" content="" />content属性值
- width：可是区域的宽度，其值可以使具体数字或关键词device-width
- height:可是区域的高度，其值可以使具体数字或关键词device-height
- initial-scale:页面首次被显示时可视区域的缩放级别，1按页面实际尺寸显示，无任何缩放
- minimum-scale:可视区域的最小缩放级别
- maximum-scale:可是区域的最大缩放级别
- user-scalable:指定用户是否可以对页面进行缩放，yes允许，no禁止。
实际项目中常用：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
