版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127178457?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522e37854aaabe435eb297786dc20318538%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=e37854aaabe435eb297786dc20318538&biz_id=0

什么是媒体查询

        随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户使用各种尺寸的手机、电脑或者其它设备来浏览 Web 内容，为了确保应用在不同设备中呈现美观的界面样式，让用户拥有一个良好的体验，这就需要用到媒体查询。
        媒体查询是 CSS 最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑等），并为它们分别定制 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户在不同的设备中都能得到很好的用户体验 。

媒体查询基础

最简单的媒体查询语法如下：

  @media media-type 
      and (media-feature-rule) {/* CSS 样式 */
     }

它由以下部分组成：

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；

• 一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；

• 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

媒体类 型

你可以指定的媒体类型为：

• all  所有设备

• print  打印机等设备

• screen  彩色屏幕（手机，电脑）

• speech  有声读物设备

下面的媒体查询将会在所有页面把 body 设定为只有 12pt 大小。

  @media all {body {font-size: 
      12pt;}}

媒体特征规则

        媒体特征规则指的是根据不同屏幕大小适配不同的css，比如在屏幕宽度大于或者小于某个大小或者恰好等于某个大小的时候应用我们规定的css样式。

        一般来说，我们可以使用min-width、max-width和width媒体特征。通过设置这些特征，实现响应式布局，能够响应不同屏幕大小，给用户一个良好的使用体验。

        例如，要想在屏幕宽度正好是 960 像素的时候，让 body 的文本变为红色，我们会用如下规则：

  @media screen 
      and (      width: 
      960px) {body {color: red;}}

min-width与max-width（宽高）

为了让width能够以范围来使用，就出现了min-width与max-width，指的是最小值与最大值。

例如下列代码，min-width:960px，最小宽度为960，指的是大于960px的字体颜色都为blue。

  @media screen 
      and (      min-width: 
      960px) {body {color: blue;}}

一般来说我们用min-width时,会从小到大开始写，而max-width则从大到小开始写。

  /*width>=960的设备*/@media (      min-width: 
      960px){body{      font-size: 
      16px}}/*>=1280的设备*/
     @media (      min-width: 
      1280px) {body{      font-size: 
      20px;}}/*>=1360的设备*/
     @media (      min-width: 
      1360px) {body{      font-size: 
      24px;}}/*>=1440的设备*/
     @media (      min-width: 
      1440px) {body{      font-size: 
      26px;}}/*>=1680的设备*/
     @media (      min-width: 
      1680px) {body{      font-size: 
      28px;}}/*>=1960的设备*/
     @media (      min-width: 
      1960px) {body{      font-size: 
      32px;}}

朝向

        朝向指的是我们手机处于横屏还是竖屏状态，根据横屏竖屏设置css样式。我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。当我们要在设备处于横向的时候改变 body 字体大小可以使用以下:

  @media (      orientation: landscape) {body {font-size:      14pt;}}