📻📻📻html和js也能用媒体查询，造吗？

超神熊猫
1,720 阅读3分钟

前言

除了 CSS 中，媒体查询也可以在 HTML 和 JavaScript 中使用。在 HTML 中，可以使用媒体查询来响应不同的屏幕大小和分辨率，而在 JavaScript 中，可以使用媒体查询来实现一些交互功能，例如响应式导航栏和滚动效果等。

什么是媒体查询？

媒体查询是一种 CSS 技术，它可以根据设备的特性 (如屏幕大小、分辨率、方向等) 来自动调整样式。它可以通过 @media 声明来使用，这些声明可以应用于 CSS 类的命名空间中。 除了在写css的时候，html和js也通用有媒体查询相关的写法，在某些场景下也有特殊的妙用

媒体类型

  1. all，适用于所有设备。默认使用该值。

  2. print，适用于在打印预览模式下在屏幕上查看的分页材料和文档。

  3. screen，主要屏幕设备，例如电脑屏幕，平板电脑，智能手机等。

  4. speech，主要用于语音合成器。

在html中使用媒体查询

在HTML中，媒体查询可以应用于各种元素：

  • 在<link>元素的media属性中，它们定义了应该应用链接资源（通常是 CSS）的媒体。
  • 在<source>元素的media属性中，它们定义了应该应用该源的媒体。（这仅在<picture>元素内部有效。）
  • 在<style>元素的media属性中，它们定义了应该应用样式的媒体。
<!-- 媒体类型 = print print.css才会被加载 -->
<link href="print.css" rel="stylesheet" media="print" />

<!-- 媒体类型 screen 设备小于600px才会被加载 -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <title>媒体查询 测试</title>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <!-- 这段css只有 屏幕小于 500px，才会生效 -->
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>内容</p>
  </body>
</html>

在js中使用媒体查询

js中使用媒体来做判断

判断屏幕（screen/viewport）窗口大小

if (window.matchMedia("(max-width: 700px)").matches) { 
    console.log('窗口小于或等于 700 像素')
} else {
    console.log('窗口大于 700 像素')
}

配合事件监听的使用

判断屏幕（screen/viewport）窗口大小，在小于等于 700 像素时修改背景颜色为黄色，大于 700 像素时修改背景颜色为粉红色：

function myFunction(x) {
    if (x.matches) { // 媒体查询
        document.body.style.backgroundColor = "yellow";
    } else {
        document.body.style.backgroundColor = "pink";
    }
}
 
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 执行时调用的监听函数
x.addListener(myFunction) // 状态改变时添加监听器

熟悉css媒体查询

上面只是简单介绍媒体查询在html和js中的使用，媒体查询的常用语法，我们还是用熟悉的css来介绍

css媒体查询的语法如下:

@media mediatype and (media feature) {  
  /* CSS rules for the media type and media feature */  
}

其中，mediatype 表示媒体类型，如 screen、print、speech 等，而 media feature 则表示设备的特性，如屏幕大小、分辨率、方向等。

常用的媒体查询类型

以下是一些常用的媒体查询类型:

屏幕大小

@media screen and (max-width: 600px) {  
  /* CSS rules for screens less than 600px wide */  
}

这个声明会在屏幕宽度小于 600 像素时生效。

屏幕宽度

@media screen and (width: 600px) {  
  /* CSS rules for screens greater than or equal to 600px wide */  
}

这个声明会在屏幕宽度大于等于 600 像素时生效。

分辨率

@media print and (max-width: 1024px) {  
  /* CSS rules for prints less than 1024px wide */  
}

这个声明会在打印时生效，它会将样式应用于宽度小于 1024 像素的页面。

方向

@media portrait {  
  /* CSS rules for devices in portrait mode */  
}

这个声明会在设备处于 portrait 模式下生效。

使用媒体查询进行自动调整

使用媒体查询可以进行自动调整，例如，以下声明会将字体大小设置为 16 像素，当设备屏幕宽度小于 500 像素时:

@media screen and (max-width: 500px) {  
  body {  
    font-size: 16px;  
  }  
}

这个声明会在屏幕宽度小于 500 像素时生效，它将字体大小设置为 16 像素，以保持用户体验的一致性。

总结

常用的媒体查询类型包括屏幕大小、屏幕宽度、分辨率和方向等。先确定自己需要的是哪种类型，再去查找对应的写法，所以媒体查询其实只需要记得有哪些类型即可，也没必要强行把所有使用语法记下来

本文正在参加「金石计划」

avatar
文章
阅读
粉丝