Question

所以我一直在搞这个小片段有一段时间了，我无法弄清楚 - 我希望能够根据屏幕大小设置类名，以便移动、桌面。

所以原文是：

const container = document.createElement('div');
container.className = 'column is-one-third is-flex py-0';
const anchor = document.createElement('a');

这适用于全方位解决方案，但假设我希望 container.className 对于 768px（移动）和更小的屏幕尺寸不同？

我尝试执行以下操作，但还没有运气让它起作用：

const container = document.createElement('div');
if (window.matchMedia( "(max-width: 768px)" )) {
    container.className = 'column is-half is-flex py-0';
} else {
    container.className = 'column is-one-third is-flex py-0';
}
const anchor = document.createElement('a');

感谢所有帮助！

Answer 1

当您使用 matchMedia 时，您应该使用 matches 属性来查看屏幕尺寸是否适合媒体查询。查看this了解更多信息。

let mql = window.matchMedia( "(max-width: 768px)" )

if (mql.matches) {
    container.className = 'column is-half is-flex py-0';
} else {
    container.className = 'column is-one-third is-flex py-0';
}

根据移动设备或桌面设备附加类名

1 个答案: