Html 通过媒体查询在桌面视图和移动视图中显示div的正确方式应该是什么

我不熟悉媒体查询。 对于移动视图和桌面视图，我使用的是2 div，具有相同的功能

一个用于移动视图，另一个用于桌面视图。两个div具有相同的内容

当有移动视图时，我隐藏桌面视图div，反之亦然

我的html代码是这样的

<div class="mobile">
Welcome to my website<br>
This is mobile view
</div>

<div class="desktop">
Welcome to my website<br>
This is desktop view
</div>

这个技术行吗

---

还有其他类似的建议吗？

最好只对一个DIV应用新的样式，该DIV可用于所有屏幕大小。这意味着冗余的HTML更少

使用这种方法，您可以创建两个HTML结构，一个用于移动设备，另一个用于桌面。这真的没有必要。通过将新样式应用于相同的div以适应不同的屏幕大小，可以获得相同的结果

例如，如果您有一个包含段落的div，并且希望在使用小型设备时将文本颜色更改为橙色

@media screen and (max-width: 767px){
div p{
   color: orange;
}

}

我要做的是创建另一个名为“custom.CSS”的CSS文件，以包含所有在任何媒体查询之外应用的常规样式

尝试将大部分样式包含在常规样式表中，然后使用媒体查询对样式进行微小的更改

我通常还有一个media.css单独的样式表。我更喜欢它，在我的脑海里似乎更有条理

我的CSS文件夹通常由以下样式表组成：

---

custom.css不建议这样做。在您的情况下，只使用一个div元素。根据您希望在移动或桌面上使用媒体查询的方式更改div元素的css。这是否回答了您的问题？如果是，请将其标记为已接受的答案？那太好了：

@media screen and (max-width: 767px){
div p{
   color: orange;
}

}