MediaQueryList

最新推荐文章于 2022-12-07 09:00:00 发布
最新推荐文章于 2022-12-07 09:00:00 发布
阅读量144 收藏
点赞数
分类专栏： web mobile开发资料 文章标签： MediaQueryList

以下部分内容来自：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的监听

 

 

iteye_2245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
windowl.matchMedia，MediaQueryList
crystalNB的专栏
09-16 924
参考：     msdn-媒体查询和侦听器     mdn-matchMedia&兼容表     w3ctech-CSS media queries在JavaScript中的应用(一)     w3ctech-CSS media queries在JavaScript中的应用(二)
js使用媒体查询
qq_26780317的博客
03-20 3968
前言：有时候，我们需要根据媒体查询，判断用户窗口的改变，从而控制一些代码的变化。样式的改变，通过CSS3的媒体查询；行为和功能的改变使用JS的媒体查询。 一、定义和用法 matchMedia()返回一个新的MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。 matchMedia()方法的值可以是任何一个CSS@media规则的特性，如min...
CSS媒体查询简介及案例
小洋人最happy的专栏
12-07 650
`媒体查询`是一种提供给`开发者`针对`不同设备`进行`定制化开发`的一个接口。通过它，我们可以根据`设备类型(比如屏幕设备、打印机设备)`或`特定的特性(比如屏幕的宽度)`来修改或适配页面。
vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点
EUEY的博客
07-06 5234
vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点
angular-media-query-handler:根据屏幕大小更改类的指令
06-24
#angular-media-query-handler 这个包包含两个指令： 更改媒体查询类元素不可见先决条件应用程序.js 将以下内容添加到 app.js 以处理调整大小和设置宽度。 //convert 'resize' event to angular event to be able ...
react-cv:使用React构建的可打印的React式简历
03-19
const mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(handleBeforePrint); return () => { mediaQueryList.removeListener(handleBeforePrint); handleAfterPrint(); }; }, []);...
media-query-detection-with-js:使用Javascript检测媒体查询
05-03
这个函数接受一个媒体查询字符串作为参数，并返回一个MediaQueryList对象，该对象包含了查询结果以及一个`matches`属性，表示媒体查询是否匹配当前环境： ```javascript let mql = window.matchMedia("(max-width: ...
react-React组件旨在有条件地根据定义的一组元素媒体查询来渲染UI
08-14
return () => mediaQueryList.removeEventListener("change", handleChange); }, []); return ( {isSmallScreen ? ( 这是小屏幕布局 ) : ( 这是大屏幕布局 )} ); } export default ...
p介质
02-14
这个方法返回一个`MediaQueryList`对象，可以监听媒体查询的变化。例如，如果想要在屏幕宽度小于600px时执行某些操作，可以这样写： ```javascript let mql = window.matchMedia("(max-width: 600px)"); mql....
兼容所有浏览器的js判断横竖屏以及监听事件
樊小书生
04-19 4421
我们在做移动端项目的时候，经常会遇到手机旋转的一些事件，对于安卓手机，在QQ和微信中我们可以用下面这行代码禁止浏览器横屏（安卓手机的QQ和微信用的都是X5浏览器）： <meta name="x5-orientation" content="portrait"> UC浏览器强制竖屏： <meta name="screen-orientation" content="p...
网页打印事件的监听
妙蛙真香的博客
06-30 2262
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 1849
最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。方案一：orientationwindow.addEventListener("orientationchange", function(event) {// 等于0或者180竖屏// 等于90或者-...
window.matchMedia
Focus-Fe
01-29 102
以下部分内容来自：https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia   个人做学习积累用       总结：        返回一个新的MediaQueryList对象     语法：   window.matchMedia(mediaQueryString)   例子：   if(w...
在React.js中使用窗口MatchMedia进行媒体查询
weixin_26717681的博客
08-14 770
魔术.. (The Magic..) We listed for this event, MediaQueryListEvent and we get an object that looks something like this back. 我们为该事件列出了MediaQueryListEvent并得到了一个看起来像这样的对象。 MediaQueryListEvent : { isTru...
Vue实现条码打印、打印回调监听
L丶cz博客
12-16 3290
vue 条码 打印 回调
js实现手机横竖屏事件
热门推荐
大灰狼的小绵羊哥哥的博客
10-22 1万+
在做H5项目时，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。 https://github.com/zuopf769/notebook/tree/master/fe/js%E5%AE%9E%E7%8E%B0%E6%89%8B%E6%9C%BA%E6%A8%AA%E7%AB%96%E5%B1%8F%E4%BA%8B%E4%BB%B6
jQuery Mobile事件，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 2927
//使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行 $(document).on("pagecreate","#pageone",function(){ // jQuery 事件... }); //点击事件 $("p").on("tap",function(){ $(this).hide(); }); //长按事件 点击不放（长按） 事件在点击并不放（大约
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、付费专栏及课程。

余额充值