乐趣区

媒体查询与响应式

jiezi

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 – 相对于视窗的尺寸
退出移动版