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

我有宽度为190像素的HTML div，它在桌面上正常工作，但在移动设备上不是，有没有办法判断连接是否来自桌面，取这个值，否则取这个值

这是我的代码：

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

在css文件中

这是我的

---

在第一行中，我们没有任何限制，但是当屏幕宽度低于768px时，您可以覆盖当前值，，，只需使用媒体查询，这是使事情响应的最佳选择。 否则，您可以看看flexbox，它非常棒

使用 使用断点的目标是各种移动设备

// This is the default size
.article {
   width: 100px;
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  width: 200px;
}

---

---

另一个答案也是针对平板电脑。但是，如果您只想针对移动设备，请使用我的解决方案。

您可能需要检查设备分辨率，而不是键入。如果您在.article类上设置宽度而不是将其内联添加，则可以检查此引用以澄清问题，您可以使用媒体查询来说明这一点。当屏幕大于x时，文章必须为190px，当屏幕小于x时，文章的宽度为100%。从较高的层次上说，我认为这是一个好答案，所以+1——但我建议从默认的移动（小屏幕）样式开始，然后使用媒体查询（最小宽度：769px）更改较大屏幕上的样式。当前示例意味着需要较小的设备来解析所有样式，而较大的设备工作起来并不那么努力。诚然，使用一个小型媒体查询，您永远不会看到性能下降，但如果样式表太多，则先启动mobile要比先重构为mobile容易得多总有一天会变大的。

// This is the default size
.article {
   width: 100px;
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  width: 200px;
}