媒体查询

媒体查询

四、媒体查询
现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。没有媒体查询几乎不能实现响应式设计，利用媒体查询，我们可以针对特定的设备，如显示器、智能手机和平板，写CSS。
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体类型引用方法：

1、link方式

2、@import方式

3、写在内部样式中

}
@media screen and (min-width:640px) and (max-width:960px) {
h1 {
background: red;
}
}

@media写在页面里比link相比可以减小页面请求 常见设备类型(media type): all 所有设备 screen 电脑显示器 print 打印用纸或打印预览视图 handheld 便携设备 tv 电视机类型的设备 speech 语意和音频盒成器 braille 盲人用点字法触觉回馈设备 embossed 盲文打印机 projection 各种投影设备 tty 使用固定密度字母栅格的媒介，比如电传打字机和终端  and 被称为关键字，only(限定某种设备)  (min-width: 400px) 就是媒体条件，其被放置在一对圆括号中。

响应式（Responsive）设计
响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

有了CSS的媒体查询这个功能，自然有了所谓的响应式，响应式由Ethan Marcotte在A List Apart发表了率先发表了响应式的创新文章，将三种开发技术整合起来（弹性网格布局、弹性图片、媒体和媒体查询），将其命名为RWD（Responsive Web Design 响应式网页设计）。

1.设置Meta标签

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

如何识别手机尺寸通过设置meta语句：

width 可视区域的宽度；
height 可视区域的高度；
device-width 设备屏幕分辨率的宽度值(视口宽度)
initial-scale 初始的缩放比例（0-10.0），取值为1时页面按实际尺寸显示，无任何缩放
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 设定用户是否可以缩放（yes/no）

响应式布局特点
设计特点：

1. 面对不同分辨率设备灵活性强
2. 能够快捷解决多设备显示适应问题
   缺点：
3. 兼容各种设备工作量大，效率低下
4. 代码累赘，会出现隐藏无用的元素，加载时间加长
5. 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
6. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

扩展：
 忽略将页面中的数字识别为电话号码

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

/设备横向放置是/
/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
h1 {
background: yellow;
}

}
/* 横屏 */
@media screen and (orientation:landscape){
h1 {
background: yellow;
}

}

orientation: landscape方向为横向
orientation: portrait方向纵向