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

Question

我是媒体查询的新手。 对于移动视图和桌面视图，我使用 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>

我的 .css 文件是这样的

.mobile{
    display: none;
 }

@media screen and (max-width: 767px){
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
}

这种技术好吗？

还有其他建议吗？

Answer 1

最好将新样式简单地应用于一个 DIV，该 DIV 可用于所有屏幕尺寸。这意味着多余的 HTML 更少。

使用您的方法，您可以创建两种 HTML 结构，一种用于移动设备，另一种用于桌面。这真的没有必要。将新样式应用于相同的 DIVS 以适应不同的屏幕尺寸，也可以达到相同的效果。

例如，如果您有一个包含段落的 div，并且您想在小型设备上将文本颜色更改为橙​​色。

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

}

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

尝试将您的大部分样式包含在通用样式表中，然后使用媒体查询对样式进行细微和最小的更改。

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

我的 CSS 文件夹通常包含以下样式表：

custom.css

media.css

您可能还需要一个styles.css 来规范化一些已经设置的样式。或者，您可以将其包含在您的 custom.css 文件中

编辑：我刚开始回答堆栈溢出问题。希望这对您有意义，如果您需要，我会尝试回答任何其他问题。