个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
polyfill 如何以及为什么可以工作？
w.matchMedia = w.matchMedia || (function( doc, undefined ) {
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <FF4 when executed in <head>
fakeBody = doc.createElement( "body" ),
div = doc.createElement( "div" );
div.id = "mq-test-1";
div.style.cssText = "position:absolute;top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q){
div.innerHTML = "­<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
docElem.insertBefore( fakeBody, refNode );
bool = div.offsetWidth === 42;
docElem.removeChild( fakeBody );
return {
matches: bool,
media: q
};
};
}( w.document ));
paulirish 也可以用另一种类似的方式实现它，https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js
关键代码如下
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
最佳答案
两者的工作方式相同。
他们只是注入(inject)您作为参数传递的媒体，并使用它来应用预定义的样式(第一个宽度为 42 像素，第二个宽度为 1 像素)，
如果元素的宽度确实是预定义的宽度，则媒体正在工作并且函数计算结果为真
关于css - matchmedia polyfill 工具，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30183550/
25
4
0
我正在尝试在移动设备上使用一个函数(本例中小于 700px)，并在大型设备上使用另一个函数。我按以下方式使用 matchMedia: var mql = window.matchMedia("(min
在构建页面时，我理解当浏览器重新计算页面上所有元素的尺寸和位置时，尽量减少“布局抖动”或“reflow”是一种很好的做法。 Paul Irish 制作了一个 handy list触发回流的过程。他说:
我想使用matchmedia.addlistener要检查窗口大小，我的按钮事件如下所示 $('button').click(function(){ if(this.attr('aria-ex
我认为 IE9 不支持 matchMedia，但媒体查询支持。 我可能忽略了这一点，但是当您只需将以下代码添加到样式表中时为什么要使用 matchMedia .desktop_view{display
有一个包含这些规则的 CSS 文件: @media screen and (orientation:portrait) { .foo {} } @media screen and (orienta
我创建了这个函数来处理我的移动导航的切换。 const mobileNav = document.getElementById('mobile-nav'); let tabs = document.g
我在组件中使用 React 上下文 API 挂载以设置方法。我还想在那里使用媒体查询并设置一种方法来根据屏幕尺寸打开或关闭 sidenav。 像这样 componentDidMount() {
我正在使用 window.matchMedia()，当达到 max 或 min width 时，我似乎无法获得应用辅助类的功能。我通过简单的字体大小更改重新创建了下面的问题。 我已经阅读了有关 mat
这段代码在两个媒体查询上工作得很好，还有一些 jQuery 的附加操作。但是我需要刷新页面才能使两个媒体查询之一起作用。 jquery 的作用是在媒体查询中添加两个div 以获得两列网格(左侧所有图片
window.matchMedia 正在运行，但我认为它会像使用“@media only screen”一样工作，并且在屏幕变窄时会发生这种情况。例如，如果您使用的是桌面浏览器，则必须使用 windo
polyfill 如何以及为什么可以工作？ w.matchMedia = w.matchMedia || (function( doc, undefined ) { var bool,
我正在尝试针对 >=768px 的视口(viewport)触发我的 fancybox，并针对 <768px 的视口(viewport)触发我的 swipebox。不幸的是现在都没有打开......我错
我正在尝试使用 matchMedia/mediaQuery Web Api - 我可以成功添加监听器，但无法删除监听器。 我错过了什么？ 这code demonstrates问题 - 尝试打印页面 -
我让 TweenLite 根据 matchMedia 大小将我的 startTrigger 设置为 x 像素。我希望这个 matchMedia 在浏览器调整大小时触发，所以我添加了一个事件监听器。它无
我正在尝试编写一些 javascript，它会在某些浏览器断点处更改 JS 配置对象中保存的一些值。 我已将 window.matchmedia 测试存储在配置对象中，然后循环遍历该对象的键以向每个测
我已经为这个问题寻找了无数的解决方案，但没有一个解决了我的问题。我非常简单地有一个导航栏，当在移动浏览器上时，它会消失并替换为一个按钮，其功能是显示和隐藏导航栏。 现在，我希望我的听众在窗口缩小时显示
很难理解它实际上是如何工作的。代码按预期工作，但由于某种原因，当调整窗口大小并触发新函数时，旧函数仍然在触发，所以一团糟。 :-/ 我确信有更好的方法来写这个。我只希望“isMobile”在 max-
我的代码很平静: const mql = window.matchMedia('(min-width: 400px)'); mql.addListener(e => { if (e.matc
我正在尝试添加这个: var mql = window.matchMedia("(max-width: 480px)"), window.matchMedia("(max-height: 479px)
我正在构建一个插件，为了打开/关闭某些行为，我正在使用 matchMedia 函数。但是在回调函数中，我需要传递一个参数来保留对此的正确引用。但是，当我尝试将参数传递给我的回调函数时，它说我的整个 a
我是一名优秀的程序员,十分优秀！