CSS媒体查询（含案例）-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS媒体查询（含案例）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是媒体查询

媒体查询基础

媒体类型

媒体特征规则

min-width与max-width（宽高）

朝向

复杂的媒体查询

与

或

非

实例

响应式导航栏

创建弹性布局

什么是媒体查询

随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 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;
    }
}

复杂的媒体查询

与

为了混合媒体特征，实现复杂的媒体查询，我们可以用and来混合媒体类型和特征。例如，我们想要屏幕宽度至少为 400 px，且设备横放时变为蓝色，那么我们需要采用以下形式。

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

或

如果我们想要屏幕宽度至少为 400 px 或者设备横放时都能采用一个css样式，我们可以使用或，比如：

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

非

如果我们在某个媒体查询不想设置某个样式，我们可以采用not，比以下，横屏的字体颜色讲不会为蓝色。

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

实例

响应式导航栏

用媒体查询制作导航栏，分别适配大屏幕与宽度小于600px的屏幕

CSS媒体查询（含案例）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* 设置顶部导航栏样式 */
.navbar {
  overflow: hidden;
  background-color: #222;
}

/* 设置 topnav 链接的样式 */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 在宽度为 600 像素或更小的屏幕*/
@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<h1>响应式导航菜单</h1>
<div class="navbar">
  <a href="#">主页</a>
  <a href="#">关于</a>
  <a href="#">联系我们</a>
</div>

</body>
</html>

创建弹性布局

可以窗口调试查看效果

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* 创建彼此相邻浮动的四个等列 */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}

/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h1>响应式四列布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>1</h2>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>2</h2>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2> 3</h2>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>4</h2>
  </div>
</div>

</body>
</html>