MediaQueryList

最新推荐文章于 2025-11-14 04:49:02 发布
最新推荐文章于 2025-11-14 04:49:02 发布 · 180 阅读 · 0
文章标签：

#MediaQueryList

本文介绍了 MediaQueryList API 的核心属性和方法，包括 matches 属性的使用方式以及如何通过 addListener 和 removeListener 方法来监听样式表媒体查询的变化。

以下部分内容来自：https://developer.mozilla.org/en-US/docs/DOM/MediaQueryList

 

个人做学习积累用。

 


 

 

如图可以知道：

 

  • 属性
  1. matches   只读、返回true or false，如果当前文档匹配media query list的话返回true
  2. media       DOMString  --- media query list

 

 

  • 方法
  1. addListener(listenerFun)              添加一个media query list的监听
  2. removeListener( listenerFun)      去掉一个media query list的监听

 

 

SAP UI5 sap.ui.Device.support 全面解析：从能力检测到响应式实践的最佳路径
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-29 135
把理解为浏览器与设备能力的语义化快照：它不决定你必须怎么做，但为何时使用何种技术提供了可靠依据。把布局与视觉交给响应式控件与媒体查询，把输入与实时等与能力强相关的行为交给support做分流，再辅以的一体化数据绑定，这是一条在复杂设备版图上稳定、可演进、易维护的适配之路。官方文档与 UI5 教程都给出了清晰的接口定义与实践路径，你可以在这些基石上，继续扩展出符合业务语境的工程规范。参考要点字段定义与注意事项。DeviceAPI 的目标与可独立加载特性。Device Model 的官方绑定范式。
SAP UI5 如何检测客户的设备是否支持触摸操作(touch detection)
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
03-26 81
Pointer Events 与 WebSocket 的检测同样能让开发者做出更精细化的交互规划，比如在支持 Pointer Events 的设备上使用更通用的指针监听，以减少分别处理鼠标与触摸的繁琐步骤。相比简单的浏览器检测字符串，这种特性检测更可靠，因为它注重实际功能而非浏览器版本号，能大幅减少来自浏览器厂商版本差异所带来的误判或冲突。过去，如果没有这样的内置机制，开发者往往需要在多个地方编写繁琐的浏览器检测或特性检测代码，既容易出错，也会造成维护难度。这样可以在后续的事件监听或样式适配时，直接判断。
windowl.matchMedia，MediaQueryList
crystalNB的专栏
09-16 1013
参考：     msdn-媒体查询和侦听器     mdn-matchMedia&兼容表     w3ctech-CSS media queries在JavaScript中的应用(一)     w3ctech-CSS media queries在JavaScript中的应用(二)
MDN DOM示例解析：MediaQueryList响应式布局检测实战
最新发布
gitblog_00750的博客
11-14 328
在现代Web开发中，响应式设计已成为标配。传统的CSS媒体查询虽然强大，但存在一个关键限制：它们只能在样式层面响应，无法在JavaScript中实时监听和响应视口变化。当你需要根据屏幕尺寸动态加载组件、调整交互逻辑或执行特定业务操作时，单纯的CSS媒体查询就显得力不从心了。 这正是`MediaQueryList` API的价值所在——它让JavaScript能够实时监听和响应媒体查询的变化，为开
js使用媒体查询
qq_26780317的博客
03-20 4234
前言：有时候，我们需要根据媒体查询，判断用户窗口的改变，从而控制一些代码的变化。样式的改变，通过CSS3的媒体查询；行为和功能的改变使用JS的媒体查询。 一、定义和用法 matchMedia()返回一个新的MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。 matchMedia()方法的值可以是任何一个CSS@media规则的特性，如min...
CSS媒体查询简介及案例
小洋人最happy的专栏
12-07 768
`媒体查询`是一种提供给`开发者`针对`不同设备`进行`定制化开发`的一个接口。通过它，我们可以根据`设备类型(比如屏幕设备、打印机设备)`或`特定的特性(比如屏幕的宽度)`来修改或适配页面。
Vue3自定义Hooks一键换肤教程
weixin_45734165的博客
07-18 660
把matchMedia()和prefers-color-scheme 结合在一起, 我们就可以通过 js 去给系统颜色为dark或 light 的情况下更换对应的 html自定义属性, 即[data-theme=‘dark’]或。2.dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme=‘dark’]的时候, dark模式权重比light低,会一直不起效果。使用函数，注意, 这里返回的 apprance 已经是一个响应式数据了。
JavaScript（四）（DOM/Node/NodeList/Document/Element）
qq_43456781的博客
07-22 1176
JavaScript（四）（DOM） 文章目录JavaScript（四）（DOM）六、DOM33. DOM 概述33.1 DOM33.2 节点33.3 节点树（Document只有两个子节点doctype/html根节点）34. Node 接口34.1 属性34.1.1 Node.prototype.nodeType34.1.2 Node.prototype.nodeName34.1.3 Node.prototype.nodeValue34.1.4 Node.prototype.textContent34.
html dom阮一峰,CSS操作 -- JavaScript 标准参考教程（alpha）
weixin_31163527的博客
06-18 586
CSS操作目录重要说明：本教程已经搬迁，此处不再维护，请访问新网址：wangdoc.com/javascript。CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如何通过 JavaScript 操作 CSS。HTML 元素的 style 属性操作 CSS 样式最简...
CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
热门推荐
Good Good Study,Day Day Up!
06-06 1万+
是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。可以让我们根据设备的类型（比如：屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面@media@importurlmedia属性, , 和其他HTML元素指定特定的媒体类型。
vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点
EUEY的博客
07-06 6123
vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点
兼容所有浏览器的js判断横竖屏以及监听事件
樊小书生
04-19 4700
我们在做移动端项目的时候，经常会遇到手机旋转的一些事件，对于安卓手机，在QQ和微信中我们可以用下面这行代码禁止浏览器横屏（安卓手机的QQ和微信用的都是X5浏览器）： <meta name="x5-orientation" content="portrait"> UC浏览器强制竖屏： <meta name="screen-orientation" content="p...
网页打印事件的监听
妙蛙真香的博客
06-30 2448
var beforePrint = function () { console.log('Functionality to run before printing.'); }; var afterPrint = function () { console.log('Functionality to run after printing'); }; if (window.matchMedia) { var mediaQuer.
html5 判断横竖屏,前端js横竖屏检测的4种方案
weixin_29523195的博客
06-19 2057
最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。方案一：orientationwindow.addEventListener("orientationchange", function(event) {// 等于0或者180竖屏// 等于90或者-...
window.matchMedia
Focus-Fe
01-29 143
以下部分内容来自：https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia   个人做学习积累用       总结：        返回一个新的MediaQueryList对象     语法：   window.matchMedia(mediaQueryString)   例子：   if(w...
在React.js中使用窗口MatchMedia进行媒体查询
weixin_26717681的博客
08-14 869
魔术.. (The Magic..) We listed for this event, MediaQueryListEvent and we get an object that looks something like this back. 我们为该事件列出了MediaQueryListEvent并得到了一个看起来像这样的对象。 MediaQueryListEvent : { isTru...
js 监测打印机打印完成
05-28
该函数返回一个`MediaQueryList`对象，可以通过监听其`change`事件来判断打印状态的变化。例如： ``` window.print(); // 触发打印操作 const mediaQueryList = window.matchMedia('print'); const printListener =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值