如何在一行中为移动设备和桌面分配css值

Question

我有宽度为190像素的HTML div,它对于桌面是正常的,但对于移动它不是,有没有办法判断连接是否来自桌面取这个值,否则取这个值？

这是我的代码:

document.querySelector('.article').style.width ='190px';

Answer 1

在你的css文件中

// Desktop
.article {
    width: 100px;
}


// Mobile
@media only screen and (max-width: 768px) {
    .article {
        width: 50px;
    }
}

这是媒体查询.

在第一行中,我们没有任何限制,但只有在屏幕宽度低于768px时才覆盖当前值