时间戳

首页 > 解决方案 > 根据移动设备或桌面附加类名

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

问题描述

所以我已经把这个小片段弄乱了一段时间，我想不通 - 我希望能够根据屏幕尺寸设置类名，例如移动设备、桌面设备。

所以原文是：

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');

所有帮助将不胜感激！

标签： javascript

解决方案

使用时matchMedia，应使用matches属性查看屏幕大小是否适合媒体查询。查看此内容以获取更多信息。

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';
}

推荐阅读