【响应式Web设计】读书笔记 - 媒体查询 - 2

最新推荐文章于 2024-09-14 21:16:31 发布

一点编程

最新推荐文章于 2024-09-14 21:16:31 发布

阅读量419

点赞数

CC 4.0 BY-SA版权

分类专栏：响应式Web设计文章标签： css3 响应式web设计读书笔记

本文链接：https://blog.youkuaiyun.com/JasonAPoint/article/details/70766710

响应式Web设计专栏收录该内容

12 篇文章

订阅专栏

本文介绍了CSS3媒体查询的基本概念及应用，展示了如何根据不同设备特性调整网页样式，包括媒体查询的语法、视口的meta标签使用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【简介】CSS3 规范分成很多模块，媒体查询（3级）只是其中一个模块。利用媒体查询，可以根据设备的特性应用特定的CSS样式。比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。

1. 为什么响应式 Web 设计需要媒体查询

CSS3 媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的 CSS 样式。

「width、height 和 color 都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。」

2. 媒体查询的语法

直接看一个非常显性例子：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
    background-color: grey;
}
@media screen and (min-width: 320px) {
    body {
        background-color: green;
    }
}

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

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

@media screen and (min-width: 960px) {
    body {
        background-color: red;
    }
}
</style>
</head>
<body>

</body>
</html>

在浏览器打开网页，缩放窗口，可以看到页面的背景颜色随着当前视口大小的变化而变化，这里我们就用到了媒体查询，使得我们可以在保持一种屏幕尺寸下的样式效果不改变，而针对另外一种屏幕尺寸做特定的适配。

2.1 使用媒体查询

可以在<link>标签的 media 属性中指定设备类型（screen 或 print），为不同设备应用样式表。

<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

这里的 media 属性用于为不同的媒介类型规定不同的样式。其中，「print」为「打印预览模式 / 打印页面」。具体的例子可以看 W3CShool 上的例子，HTML <link> 标签的 media 属性。

这里写图片描述

这是默认屏幕上的样式。

这里写图片描述

通过浏览器的打印预览功能，进入打印界面，此时的页面的样式为「print」的样式。

link 的媒体查询不仅可以指定设备类型，还可以指定设备的能力和特性。

<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="portrait-screen.css">

这个媒体查询表达式询问了设备的类型（是屏幕设备吗？），然后又询问了特性（屏幕是垂直的吗？）。只有符合了这两个条件之后，才会获得「portrait-screen.css」的样式。

此外，还可以写成否定的形式，在不满足条件的情况下应用 CSS 样式。

<link rel="stylesheet" type="text/css" media="not screen and (orientation: portrait)" href="portrait-screen.css">

使用 @import 有条件地向当前样式表中加载其他样式表。

@import url("phone.css") screen and (max-width: 360px);

在屏幕设备上，而且视口不超过 360 像素的情况下，引入「phone.css」样式表。

最为常见的是在 CSS 文件内部直接使用媒体查询。

h1 {
    color: black;
}

@media screen and (max-device-width: 400px) {
    h1 {
        color: green;
    }
}

在正常屏幕下显示 h1 的字体为黑色，而在屏幕宽度在 400px 以下的情况下，h1 的字体显示绿色。

2.2 关于视口的 meta 标签

为了利用媒体查询，应该让小屏幕以其原生大小来显示网页，而不是现在 980px 的窗口中渲染好，让用户去放大或缩小。通过视口meta标签实现。

<meta name="viewport" content="initial-scale=2.0,width=decvice-width">

首先，name=”viewport” 表示针对视口。接着，content=”initial-scale=2.0” 表示把内容放大为实际大小的两倍。最后，width=device-width 表示浏览器页面的宽度等于设备的宽度。

<meta name="viewport" content="width=decvice-width, maximum-scale=3, minimum-scale=0.5">

这里，maximum-scale=3 表示允许用户最大奖页面放大到设备宽度的3倍，minimum-scale=0.5 表示最小可以将页面缩小大设备宽度的一半。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

这里，user-scalable=no 表示禁止用户缩放。

附：欢迎大家关注我的新浪微博 - 一点编程，了解最新动态。