响应式布局 - 媒体查询语法

听海边涛声

于 2024-09-03 19:04:46 发布

阅读量200

点赞数 2

文章标签：前端 html

本文链接：https://blog.csdn.net/panghuangang/article/details/141867908

版权

媒体类型

说明

媒体类型（media types）描述设备的一般类型。

all：适用于所有设备
print：适用于在打印预览的模式下
screen：主要用于屏幕
speech：主要用于语音合成器

示例：媒体查询screen

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen {
      p {
        border: solid 5px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

在正常屏幕上是有黑色的边框的：
在这里插入图片描述

右键-》打印：
在这里插入图片描述

没有边框：
在这里插入图片描述

示例：媒体查询print

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media print {
      p {
        border: solid 5px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

在屏幕上预览，没有边框：
在这里插入图片描述

打印，有边框：
在这里插入图片描述

媒体特性

说明

媒体特性（media features）描述了输出设备或者浏览环境的具体特性。

width：viewport的宽度，有max-width 和 min-width
height：viewport的高度，有max-height 和 min-height
aspect-ratio：viewport的宽高比
orientation：viewport的旋转方向，有portrait（竖屏）和 landscape（横屏）

示例：查询最大宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media (max-width:700px) {
      p {
        border: solid 5px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

正常显示的时候，没有边框，因为我们的屏幕宽度超过了700px：
在这里插入图片描述

缩小屏幕，让宽度小于700px，出现了边框：
在这里插入图片描述

示例：查询屏幕的旋转方向

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media (orientation:portrait) {
      p {
        width: 200px;
        height: 200px;
        background: pink;
      }
    }

    @media (orientation:landscape) {
      p {
        width: 200px;
        height: 200px;
        background: green;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

竖屏的时候，背景颜色为粉色：
在这里插入图片描述

横屏的时候，背景颜色为绿色：
在这里插入图片描述

逻辑操作符

说明

逻辑操作符可用于联合构造复杂的媒体查询。

and：用于将多个媒体查询规则组合成单条媒体查询
not：用于否定媒体查询，如果不满足这个条件则执行内容，否则将不执行
only：用于旧版浏览器识别媒体类型使用（当前不常用了）
逗号：用于将多个媒体查询合并为一个规则

示例：and

在正常屏幕模式下、并且视口宽度在600px~1200px之间才会显示边框：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen and (max-width:1200px) and (min-width:600px) {
      p {
        border: solid 3px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

在这里插入图片描述

示例：not

视口宽度不在600px~1200px之间才会显示边框：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media not screen and (max-width:1200px) and (min-width:600px) {
      p {
        border: solid 3px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>

在这里插入图片描述

示例：逗号

在屏幕和打印模式下都会显示边框：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen,
    print {
      p {
        border: solid 3px black;
      }
    }
  </style>
</head>

<body>
  <p>我爱祖国的蓝天</p>
</body>

</html>