响应式 媒体查询

媒体查询media Query( ['kwɪərɪ])
viewport(视口)
许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域，主要目的就是让pc页面在智能手机端阅读时不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

含义为：宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小，不允许用户放大或者缩小; 如何识别手机尺寸通过设置meta语句： width 可视区域的宽度,值可为数字或关键词device-width； height 可视区域的高度,关键词device-height； initial-scale 页面首次被显示时的缩放级别（0-10.0），取值为1时页面按实际尺寸显示，无任何缩放 minimum-scale 设定最小缩小比例（0-10.0），取值为1时将禁止用户缩小至实际尺寸之下 maximum-scale 设定最大放大比例（0-10.0），取值为1时将禁止用户放大至实际尺寸之上 user-scalable 设定用户是否可以缩放（yes/no），一般情况下允许 device-width 设备屏幕的宽度值 很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而不会自动缩放，用户需要手动移动页面或者缩放。 请记住：如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。

meta
忽略Android平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 隐藏状态栏 blank:消失，空白 iPhone会将看起来像电话号码的数字添加电话连接，应当关闭 detection[dɪ‘tekʃ(ə)n]侦查

css3 媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
语法：
媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式. 这些表达式描述了媒体特征, 最终会被解析为true或false. 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是true, 那么该媒体查询的结果为true,媒体查询中的CSS被应用，如果为false，媒体查询内的CSS将被忽略。
使用：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype默认值是all(全部)；

逻辑操作符
可以使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询。
and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的媒体类型(all)：

@media (min-width: 700px) { … }
设置最小宽度为700px是，有效；
@media(min-width: 700px) and (orientation: landscape) { … }
在可视区域宽度不小于700像素并在在横屏时有效
@media tv and (min-width: 700px) and (orientation: landscape) { … }
在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。
/* 打印样式 /
@media print {}
/ 手机等小屏幕手持设备 /
@media screen and (min-width: 320px) and (max-width: 480px) {}
/ 竖屏 /
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/ 横屏 */
@media screen and (orientation:landscape){对应样式}
媒体查询中可以使用逗号分隔，效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。
例如，在最小宽度为700像素或是横屏的手持设备上应用一组样式：
@media (min-width: 700px), handheld and (orientation: landscape) { … }
如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

@media handled and (min-width:360px),screen and (min-width:480px){…}
@media screen and (min-width:800px),print and (min-width:700px){…}

not 关键字应用于整个媒体查询，在媒体查询为假时返回真，在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
例如，not 在下面的查询中最后被计算：
@media not all and (monochrome) { … }
等价于：
@media not (all and (monochrome)) { … }
而不是：
@media (not all) and (monochrome) { … }
例如：看下面的媒体查询：
@media not screen and (color), print and (color)
等价于：
@media (not (screen and (color))), print and (color)

only(限定某种设备):only使用跟not相同，指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
@media only screen and (color){…}
/* 平板之类的宽度 1024 以下设备 /
@media only screen and (min-width: 321px) and (max-width: 1024px) {}
/ PC客户端或大屏幕设备: 1028px 至更大*/
@media only screen and (min-width: 1029px) {}
媒体类型引用方法：
1、link方式

media：引入条件

2、@import方式

添加媒体查询的样式没有添加媒体查询的样式之间的优先级也是根据书写顺序规定的
响应式布局的背景
PC互联网加速向移动端互联网普及率为42.1%，手机用户占网民总数的74.5%。
目前，移动互联网的数据流量已经超越PC端的流量。 移动端入口：当用户希望通过手机来完成PC页的操作时，常见的是商家的运营微博，文案足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终导致用户放弃参加
responsive Web Design—响应式布局
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念；Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先将已有的开发技巧整合起来，命名为响应式网页设计，是一种针对任意设备使网页内容进行“完美”布局的一种显示机制。简言之，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优势
多终端视觉和操作体验非常,风格统一
兼容当前及未来新设备
响应式web设计中的大部分技术可以用在WebApp开发中
节约了开发成本，维护成本也降低很多
不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，
但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长
兼容各种设备工作量大
适用：
对于重内容的网站，例如形象展示，则比较适合使用响应式web设计
不适用：
对于重功能的网站，如电子商务类，则更推荐使用独立移动网站