使用JavaScript媒体查询

JavaScript媒体查询：超越窗口调整大小

当您想到媒体查询时，我会想到什么？ CSS可能这样的规则：

身体 {
  背景色：梅子；
}

@Media（最小宽度：768px）{
  身体 {
    背景色：番茄；
  }
}

CSS媒体查询是响应式设计的基础，根据视口尺寸，设备类型，偏好（配色方案，运动）等应用样式。但是JavaScript还提供媒体查询功能，通常对于创建响应式插件或基于屏幕条件动态调整元素很有价值。

与CSS不同，JavaScript的媒体查询处理不同。核心概念保持不变：匹配条件并应用动作。

使用matchMedia()

matchMedia()方法确定媒体查询是否匹配当前文档状态。尽管在CSS对象模型视图模块工作草案中，但浏览器支持非常出色。

用法镜像CSS：将媒体查询字符串传递到matchMedia()并检查.matches属性。

 //定义查询
const MediaQuery = window.matchmedia（'（Min Width：768px）'）;

matchMedia()返回MediaQueryList对象。它的.matches属性（仅读取布尔值）指示该文档是否匹配查询。

 //创建至少768px宽的视口媒体条件
const MediaQuery = window.matchmedia（'（Min Width：768px）'）;
//检查媒体查询是否匹配
if（MediaQuery.Matches）{
  //触发动作
  警报（“媒体查询匹配！”）;
}

此处理单个检查。为了进行连续监视，我们需要活动听众。

聆听更改

MediaQueryList提供addListener() （和removeListener() ）在媒体查询状态更改时触发回调函数（ .onchange事件）。这允许对更新条件的响应措施。

 //创建一个至少768px宽的视口条件
const MediaQuery = window.matchmedia（'（Min Width：768px）'）;

功能Handletabletchange（e）{
  //检查媒体查询是否匹配
  if（e.Matches）{
    //执行动作
    console.log（'媒体查询匹配！'）;
  } 别的 {
    console.log（'媒体查询无与伦比！'）;
  }
}

//注册活动听众
MediaQuery.Addlistener（HandletableChange）;

//初始检查
Handletabletchange（MediaQuery）;

addListener()不会立即发射；您必须用MediaQueryList对象手动将处理程序称为参数。

“旧”方法

为了进行比较，较旧的方法使用window.innerWidth或window.innerHeight的resize大小侦听器。这效率较低，用途不足。

函数checkmediaquery（）{
  //检查窗口内部宽度是否大于768px
  如果（window.innerwidth> 768）{
    //执行动作
    console.log（'媒体查询匹配！'）;
  }
}

//为窗口大小事件添加侦听器
window.AddeventListener（'resize'，checkmediaquery）;

与更强大的matchMedia()方法不同，这是性能密集的，并且仅限于视口尺寸检查。

结论

matchMedia()和MediaQueryList提供了强大的JavaScript媒体查询处理，启用了一次性和连续的检查，对简单视口尺寸以外的各种条件的变化做出了反应。较旧的resize大小的侦听器保持功能性，但效率较低，功能较低。 matchMedia()的灵活性使其成为现代响应JavaScript开发的首选方法。

这是一个示例，证明了旧方法无法使用的功能：检测景观方向。这通常用于HTML5游戏开发中。

以上是使用JavaScript媒体查询的详细内容。更多信息请关注PHP中文网其他相关文章！