媒体查询与响应式

1：基本概念

根据一个或多个基于设备类型、具体特色和环境的媒体查询来应用样式。简单来讲就是针对不一样的媒体类型（好比屏幕、打印机或者屏幕阅读器）定义不一样的样式，能够针对不一样的屏幕尺寸设置不一样的样式（好比手机iphone6和iPhone6plus它们两尺寸是不同的、笔记本电脑和电脑屏幕也是不同的大小），应用的、了响应式布局咱们就能够实如今小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的，或者说不至于出现样式的错乱。

2：浏览器兼容

彻底支持@media第一个浏览器版本（ie9如下是不支持的）

图片描述

3：语法

在了解语法前，咱们须要了解一下css，css叫作层叠样式规则，也就是后面的会把前面的覆盖掉，这里涉及到了优先级的问题。所以媒体查询@media通常放在css文件的最下面，由于读文件是从上到下依次进行，为了避免被覆盖掉。

写法一：

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

写法二：在不一样的屏幕尺寸下面引用不一样的css文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

那么media究竟是怎么使用的呢？首先是它的媒体类型：

4：媒体类型（分为四种）

all（全部设备）

@media all and|not|only (media feature) {
    CSS-Code;
}

screen（电脑屏幕，平板电脑，智能手机）

@media screen and|not|only (media feature) {
    CSS-Code;
}

print（打印机和打印预览）

@media print and|not|only (media feature) {
    CSS-Code;
}

speech（屏幕阅读器等发声设备，通常是供盲人浏览网页使用）

@media speech and|not|only (media feature) {
    CSS-Code;
}

5：运算符（是跟在mediatype后面的）

运算符是跟在mediatype后面的，它的意思就是and链接、not不是、only，除此以外还有一个，逗号，逗号就是或的意思，两个逗号左侧或在右侧知足任何一个都会应用样式。

and

@media screen and (max-width: 600px) {
        CSS-Code;
 }

not

@media not screen {
        CSS-Code;
}

only

@media only screen {
        CSS-Code;
}

, 表示或的意思

@media print , (max-width : 600px) {
        CSS-Code;
 }

6：媒体功能

咱们大多数的开发工做都是应用在屏幕上的，屏幕有不少尺寸，这个时候咱们就须要使用媒体功能来应用不一样的样式。下面主要介绍了三个：

width / height

@media screen and (width : 600px) , (width : 800px) {
        CSS-Code;
}

min-width / min-height

@media screen and (min-width : 600px) {
        CSS-Code;
}

max-width / max-height

@media screen and (max-width : 600px) {
        CSS-Code;
}

除了上面的三个主要的还有一些其余的媒体功能：

• device-height - 屏幕可见高度
• min-device-height - 最小的可视区域
• max-device-height - 最大的可视区域
• device-width - 屏幕可见宽度
• max-device-width
• min-device-width
• (color: 8) - 每一组彩色原件的个数
• max-color
• min-color
• (color-index: 1500) - 设备的彩色查询表条目数
• max-color-index
• min-color-index
• (orientation: landscape) - 横纵
• (monochrome: 0) - 一个单色框架缓冲区中每像素包含的单色原件个数
• min-monochrome
• max-monochrome
• (grid: 1) - 是否使用栅格或点阵
• (scan: interlace) - 扫描工序
• (device-aspect-ratio: 8/5) - 屏幕可见区域宽高比
• min-device-aspect-ratio
• max-device-aspect-ratio
• (aspect-ratio: 8/5) - 页面可见区域宽高比
• min-aspect-ratio
• max-aspect-ratio
• (resolution: 996dpi)- 分辨率
• min-resolution
• max-resolution
• device-pixel-ratio - 像素比
• min-device-pixel-ratio
• max-device-pixel-ratio

其中比较重要的一个像素比 device-pixel-ratio：又分为物理像素（实际的硬件像素）和逻辑像素（跟适口viewport有关）。

7：常见的自适应布局方式

• px和Viewpor
• 媒体查询
• 百分比布局
• rem布局 - 专题介
• vw/vh - 相对于视窗的尺寸