《图解CSS3》笔记5 媒体与Responsive设计

Media Type:　媒体类型

　　CSS2中的属性，用来指定页面渲染的设备的类型，常用的有：all、screen、print（打印），此外还有针对投影、盲人的多种设备类型

引用方式：

1. <link>标签：　　　　　　属性名media="screen"；

2. @import方式：　　　　　@import url(xx.css) screen（用于：CSS文件中引入另一个CSS或者<style>标签中）

3. @media方式：　　　　　@media screen { ... }（CSS3中的特性）

Media Query: 媒体查询

　　CSS3特性，添加了新规则：基于媒体类型 + CSS属性规则定义

使用方式：

1. <link>标签　　　　　　<link media="screen and (min-width: xxxpx)">

2. 文本方式：　　　　　　@media screen and (min-width:xxxpx) { ... }

　　表达式支持以下关键词：

　　not

　　only

响应式设计的特点：网格布局（弹性布局）、弹性图片、风格灵活

meta标签中视口viewport的content属性值：<meta name="viewport" content="...">

width=device-width, initial-scale=1.0, user-scalable=no