小码哥的IT人生

CSS 媒体查询 详解

css3基础 2022-05-23 12:08:44小码哥的IT人生shichen

CSS 媒体查询

CSS2 引入了媒体类型

CSS2 中引入了 @media 规则,它让为不同媒体类型定义不同样式规则成为可能。

例如:您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备,甚至还有一组用于电视,等等。

不幸的是,除了打印媒体类型之外,这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念:它们并不查找设备类型,而是关注设备的能力。

媒体查询可用于检查许多事情,例如:

  1. 视口的宽度和高度
  2. 设备的宽度和高度
  3. 方向(平板电脑/手机处于横向还是纵向模式)
  4. 分辨率

使用媒体查询是一种流行的技术,可以向台式机、笔记本电脑、平板电脑和手机(例如 iPhone 和 Android 手机)提供定制的样式表。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性          
@media 21.0 9.0 3.5 4.0 9.0

媒体查询语法

媒体查询由一种媒体类型组成,并可包含一个或多个表达式,这些表达式可以解析为 true 或 false。

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

如果指定的媒体类型与正在显示文档的设备类型匹配,并且媒体查询中的所有表达式均为 true,则查询结果为 true。当媒体查询为 true 时,将应用相应的样式表或样式规则,并遵循正常的级联规则。

除非您使用 not 或 only 运算符,否则媒体类型是可选的,且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表:

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

CSS3 媒体类型

描述
all 用于所有媒体类型设备。
print 用于打印机。
screen 用于计算机屏幕、平板电脑、智能手机等等。
speech 用于大声“读出”页面的屏幕阅读器。

媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色(如果视口小于 480 像素,则背景颜色会是粉色):

示例代码:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: pink;
}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
</style>
</head>
<body>
<h1>请调整浏览器窗口大小来查看效果!</h1>
<p>此媒体查询值应用于:媒体类型为 screen,且视口为 480px 或更宽。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

下例显示了一个菜单,如果视口的宽度为 480 像素或更宽,则该菜单会浮动到页面的左侧(如果视口小于 480 像素,则该菜单将位于内容的顶部):

示例代码:

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
  float: none;
  width: auto;
}
#menulist {
  margin: 0;
  padding: 0;
}
.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  <div id="main">
    <h1>请调整浏览器窗口大小来查看效果!</h1>
    <p>本例显示了一个菜单,如果视口为 480 像素或更宽,它将向页面左侧浮动。如果视口小于 480 像素,则菜单将位于内容的顶部。</p>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

更多媒体查询实例

如需更多媒体查询的实例,请访问下一页:CSS MQ 实例

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述,请查看我们的 CSS 参考中的 @media 规则

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024