个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我一直在寻找一种轻量级、灵活的跨浏览器解决方案，用于在 JavaScript 中访问 CSS 媒体查询，不会在 JavaScript 代码中重复 CSS 断点 .
CSS 技巧发布了一个 CSS3 animations-based solution ，这似乎可以解决问题，但它建议使用 Enquire.js相反。
Enquire.js 似乎仍然需要在脚本中硬编码媒体查询大小，例如
enquire.register("screen and (max-width:45em)", { // do stuff }
问题
到目前为止，所有在 Javascript 中访问媒体查询的解决方案似乎都依赖于在脚本中硬编码的断点。如何以允许仅在 CSS 中定义断点而不依赖于 .on('resize') 的方式访问断点？
尝试的解决方案
我已经制作了我自己的适用于 IE9+ 的版本，使用一个隐藏元素，该元素使用 :content 属性在查询触发时添加我想要的任何内容(与 ZeroSixThree's solution 相同的起点) :
HTML
<body>
<p>Page content</p>
<span id="mobile-test"></span>
</body>
CSS
#mobile-test {
display:none;
content: 'mq-small';
}
@media screen only and (min-width: 25em) {
#mobile-test {
content: 'mq-medium';
}
}
@media screen only and (min-width: 40em) {
#mobile-test {
content: 'mq-large';
}
}
使用 jQuery 的 JavaScript
// Allow resizing to be assessed only after a delay, to avoid constant firing on resize.
var resize;
window.onresize = function() {
clearTimeout(resize);
// Call 'onResize' function after a set delay
resize = setTimeout(detectMediaQuery, 100);
};
// Collect the value of the 'content' property as a string, stripping the quotation marks
function detectMediaQuery() {
return $('#mobile-test').css('content').replace(/"/g, '');
}
// Finally, use the function to detect the current media query, irrespective of it's breakpoint value
$(window).on('resize load', function() {
if (detectMediaQuery() === 'mq-small') {
// Do stuff for small screens etc
}
});
这样，媒体查询的断点就完全由 CSS 处理了。如果您更改断点，则无需更新脚本。如何做到这一点？
最佳答案
试试这个
const mq = window.matchMedia( "(min-width: 500px)" );
matches属性根据查询结果返回true或false，例如
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}
您还可以添加一个事件监听器，它会在检测到更改时触发:
// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}
}
关于javascript - 在不对脚本中的断点宽度进行硬编码的情况下使用 JavaScript 检测动态媒体查询？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44688393/
25
4
0
算力时代，视频云需要怎样的 CPU？ 在数据爆发式增长及算法日益精进的大背景下，属于「算力」的时代俨然到来。随着视频成为互联网流量的主角，日趋饱和的音视频场景渗透率、人类对“感官之限”的追
我正在使用 keras 开发深度网络。有一个激活“硬 sigmoid”。它的数学定义是什么？ 我知道什么是 Sigmoid。有人在Quora上问了类似的问题:https://www.quora.com
我有一个不寻常的 SQL 问题，我不太确定如何最好地解释，所以请耐心等待。我有三张表，一张是志愿者组织的表，一张是用户的表，一张是用户详细信息的表。 #Table 1# ## Name Preside
我正在尝试使用名为 bigText 的 jquery 插件。一个很棒的用于创建 block 头的插件。如果您想将其与自定义字体一起使用，它会声明您需要 google webfont loader，这样
假设我有一张 table date,personid 1/1/2001 1 1/2/2001 3 1/3/2001 2 1/4/2001 2 1/5/2001 5 1/6/2001 5 1/7/200
下面是我要执行的 SQL。我想避免为此执行多个请求，我很确定这是可能的…… First table : products_categories (category_id, category_infos
我在 android studio 中重新设置了一些提交，并选择了硬重置类型。我失去了一个星期的工作。是否有希望撤销此操作？我正在使用 android studio，它有内置的 GUI 选项来执行所有
当我使用我的交叉工具链编译 C 代码时，链接器会打印出警告页面，说明我的可执行文件使用了硬 float ，但我的 libc 使用了软 float 。有什么区别？ 最佳答案 硬浮点使用片上浮点单元。软
linux系统有arm64，arm架构armv8-a。如何知道 debian 是运行硬浮点还是软浮点？ 最佳答案 符合 AAPCS64, GNU GCC for armv8 仅提供硬浮点 aarch6
我正在开发 cortex-m3 的微内核。我创建了一个故意导致错误的小型测试应用程序。 现在我不确定如何从故障中返回。我知道堆栈可能需要使用不同函数的地址进行更新。我也知道在某些情况下从错误返回可能是
硬/软 限制是什么意思？ 核心文件大小的差异例如: ulimit -Sc 1024 与 ulimit -Hc 1024 我通常在运行二进制文件之前将脚本放入 ulimit -c unlimited。
我想在 Java 中加载一个 MSCAPI keystore 并检查 MY 存储中的可用证书。但是，这些证书的一些 key 驻留在硬件 token 上，并且弹出窗口会在加载期间询问 token 。 有
是的，这是一个有点棘手的问题； 一个数组(没有副本)，而不是任何奇数数组。让我解释一下，让我们从这里开始； $a = array ( 'one' => 1, 'two' => 2, 'three' =
我需要在运行 Ubuntu 12.04 的 BeagleBoard xM rev C 上运行一个使用 ftd2xx 的程序。我正在尝试使用提供的 ARM 库 libftd2xx.so here . l
我是一名优秀的程序员,十分优秀！