#6.2 最后一篇 ：Media Query响应式布局—媒体查询、Multi-column多列
一、Media Query响应式布局—媒体查询
Def 响应式布局：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。
如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多（如扫一扫），比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口大小为用户提供匹配的视觉效果还是优先选择响应式设计。
优点：
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：
1.兼容各种设备工作量大，效率略慢
2.代码累赘，会出现隐藏无用的元素，加载时间加长
3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
例子：
Media Query（媒介查询）
作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸（e.g.手机端、Pad端、PC端）设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。
通过不同的媒体类型和条件定义样式表规则。
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width
Media Queries可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
使用Media Query的基本语法
@media #MediaType# and | not | only (media feature) {
CSS-Code;
}
以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有 screen 最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。
@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。
媒体类型有：
all所有设备 print用于打印机和打印预览 screen用于电脑屏幕，平板电脑，智能手机等 speech应用于屏幕阅读器等发声设备
e.g.根据设备大小（屏幕宽度来判断）改变背景色
/*PC端*/
@media screen and (min-width: 992px){
body{
background-color: red;
}
}
/*移动端*/
@media screen and (max-width: 768px){
body{
background-color: blue;
}
}
/*Pad端*/
@media screen and (max-width: 992px) and (min-width: 768px){
body{
background-color: orange;
}
}
用媒体查询改造我们的设计
我们都知道，样式表里面，后面的样式会覆盖前面的样式。因此，我们可以在设置好网站基本样式后，使用媒体查询来进一步重写相应的部分。例如，在PC端将导航显示成简单的链接，然后再针对小视口，使用媒体查询重写这一部分。理论上讲最好是从小屏幕设备开始设计，然后渐进增强。但实际上我们使用媒体查询要解决的问题，都是已经存在PC端站点了，更多的是要将现有的桌面版网页改造成响应式的。
加载媒体查询的最佳方法
使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。
阻止移动浏览器自动调整页面大小
ios和Android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签，meta标签中可以设置具体的宽度或缩放比。
e.g.1.
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
name=”viewport” 说明此meta标签定义视口的属性
initial-scale=2.0 意思是将页面放大两倍
width=device-width 告诉浏览器页面的宽度等于设备宽度
e.g.2.允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半
<meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5” />
e.g.3.禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
//user-scalable=no是禁止缩放
二、多列multi-column
多列multi-column：让文本呈现多列显示。
是传统HTML网页中块状布局模式的有力扩充。它的显示如同word中的多列。
//在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
多列有这么几个常用属性：
column-count 分几列
column-gap 列间距
column-rule 列分割线的样式
#6.2 笔记 完
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
