万科网络科技

深入探究媒体查询高级玩法

媒体查询是响应式网页设计中的重要工具，除了常见的根据屏幕尺寸改变布局外，它还有许多高级用法。下面将详细介绍这些高级用法。

结合 JavaScript 动态调整

媒体查询通常是在 CSS 中使用，但结合 JavaScript 可以实现更动态的效果。通过 JavaScript 监听媒体查询的变化，可以在不同的屏幕条件下执行特定的代码。

例如，当屏幕宽度小于 768 像素时，我们希望隐藏某个导航菜单，并提供一个汉堡菜单图标来展开菜单。可以使用以下代码实现：

首先在 CSS 中定义基本样式：

css

.nav-menu {

display: block;

}

.hamburger-menu {

display: none;

}

@media (max-width: 767px) {

.nav-menu {

display: none;

}

.hamburger-menu {

display: block;

}

}

然后在 JavaScript 中监听媒体查询的变化：

javascript

const mediaQuery = window.matchMedia('(max-width: 767px)');

function handleMediaQueryChange(e) {

if (e.matches) {

// 当屏幕宽度小于 768 像素时的操作

const hamburger = document.querySelector('.hamburger-menu');

hamburger.addEventListener('click', function() {

const navMenu = document.querySelector('.nav-menu');

navMenu.style.display = navMenu.style.display === 'none' ? 'block' : 'none';

});

} else {

// 当屏幕宽度大于等于 768 像素时的操作

const navMenu = document.querySelector('.nav-menu');

navMenu.style.display = 'block';

}

}

mediaQuery.addListener(handleMediaQueryChange);

handleMediaQueryChange(mediaQuery);

这样，当屏幕宽度变化时，不仅样式会改变，还可以执行相应的交互逻辑。

多条件组合查询

媒体查询可以使用逻辑运算符（and、or、not）来组合多个条件，实现更精确的屏幕适配。

例如，我们希望在屏幕宽度在 768 像素到 1024 像素之间，并且是横向模式时，应用特定的样式。可以使用以下代码：

css

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

body {

background-color: lightblue;

}

.content {

width: 80%;

margin: 0 auto;

}

}

在这个例子中，只有当屏幕宽度满足 768 像素到 1024 像素之间，并且设备处于横向模式时，才会应用这些样式。

再比如，我们希望在屏幕宽度小于 768 像素或者设备是打印模式时，隐藏某个侧边栏：

css

@media (max-width: 767px), print {

.sidebar {

display: none;

}

}

这里使用了 or 逻辑（用逗号分隔），只要满足其中一个条件，侧边栏就会被隐藏。

使用自定义媒体查询

一些现代浏览器支持自定义媒体查询，通过 @custom-media 规则可以定义自己的媒体查询条件，提高代码的可维护性和复用性。

例如，我们经常需要在多个地方使用屏幕宽度在 768 像素到 1024 像素之间的媒体查询，可以这样定义：

css

@custom-media --tablet (min-width: 768px) and (max-width: 1024px);

@media (--tablet) {

.header {

font-size: 1.2em;

}

.footer {

padding: 20px;

}

}

这样，在其他地方需要使用相同的媒体查询条件时，只需要引用 --tablet 即可，避免了重复编写相同的代码。

基于分辨率的媒体查询

除了屏幕宽度和高度，媒体查询还可以根据设备的分辨率来应用不同的样式。这对于高分辨率屏幕（如 Retina 屏幕）特别有用。

例如，当设备的分辨率大于等于 2dppx（每英寸点数）时，我们可以使用更高质量的图片：

css

.logo {

background-image: url('logo.png');

}

@media (min-resolution: 2dppx) {

.logo {

background-image: url('logo@2x.png');

}

}

在这个例子中，普通屏幕使用 logo.png 图片，而高分辨率屏幕使用 logo@2x.png 图片，以提供更清晰的显示效果。

另外，还可以结合屏幕宽度和分辨率进行查询。比如，在屏幕宽度大于 1024 像素且分辨率大于 1.5dppx 时，应用特定的样式：

css

@media (min-width: 1024px) and (min-resolution: 1.5dppx) {

.hero-image {

background-size: cover;

background-position: center;

}

}

媒体查询在打印样式中的应用

媒体查询不仅可以用于屏幕显示，还可以为打印样式提供特定的布局和样式。

例如，我们希望在打印时隐藏导航菜单和页脚，只显示主要内容。可以使用以下代码：

css

@media print {

.nav-menu, .footer {

display: none;

}

.content {

width: 100%;

margin: 0;

padding: 0;

}

body {

font-size: 12pt;

line-height: 1.5;

}

}

在这个例子中，当用户打印页面时，导航菜单和页脚会被隐藏，主要内容会占据整个页面宽度，并且字体大小和行高也会进行调整，以适应打印需求。

还可以在打印时调整图片的显示方式。比如，将彩色图片转换为灰度图片，以节省打印成本：

css

@media print {

img {

filter: grayscale(100%);

}

}

通过这些高级用法，媒体查询可以在不同的场景下发挥更大的作用，帮助我们创建更加灵活和适配的网页。