主要内容
媒体查询多列学习目标
一、媒体查询
1.1概念
一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。
Responsivedesign，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
1.2响应式布局的优缺点
1.2.1优点
（1）面对不同分辨率设备灵活性强
（2）能够快捷解决多设备显示适应问题
1.2.2缺点
（1）兼容各种设备工作量大，效率低下
（2）代码累赘，会出现隐藏无用的元素，加载时间加长
1.3响应式设计的步骤
1.3.1设置meta标签
参数解释：
width=device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0）minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
1.3.2通过媒介查询来设置MediaQueries
MediaQueries是响应式设计的核心。
MediaQueries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
具体来说,MediaQueries的使用方法如下。
媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（）和大于（）这样的符号来判断。接下来一起来看看MediaQueries在实际项目中常用的方式。
1.最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
上面表示的是：当屏幕小于或等于px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
上面表示的是：当屏幕大于或等于px时，容器“.wrapper”的宽度为px。
3.多个媒体特性使用
MediaQueries可以使用关键词and将多个媒体特性结合在一起。也就是说，一个MediaQuery中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在px~px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
1.4实例
PC端
iPad端
移动端
二、多列
2.1定义
CSS3可以将文本内容设计成像报纸一样的多列布局，如下实例:
2.2属性
2.2.1创建多列
column-count属性指定了需要分割的列数。
以下实例将div元素中的文本分为3列：
2.2.2列与列之间的间隙
column-gap属性指定了列与列间的间隙。
以下实例指定了列与列间的间隙为40像素：
2.2.1列边框
（1）column-rule-style属性指定了列与列间的边框样式：
（2）column-rule-width属性指定了两列的边框厚度:
（3）column-rule-color属性指定了两列的边框颜色：
（4）column-rule属性是column-rule-*所有属性的简写。
以下实例设置了列直接的边框的厚度，样式及颜色：
三、作业
Pc端
移动端：