通过媒体查询在桌面视图和移动视图中显示 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 上，该样式适用于所有屏幕尺寸。这意味着冗余更少 HTML。

通过您的方法，您可以沿着路线创建两个 HTML 结构，一个用于移动设备，一个用于桌面设备。这真的没有必要。同样的结果可以通过对相同的 DIVS 应用新的样式来适应不同的屏幕尺寸来实现。

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

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

}

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

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

我通常也有一个 "media.css" 单独的样式 sheet。我更喜欢它，我的头脑似乎更有条理。

我的 CSS 文件夹通常包含以下样式 sheets:

custom.css <-- 包含通用样式 - 这是所有样式的基础。我总是试图掩盖

media.css <-- 包含针对不同屏幕尺寸和设备方向的媒体查询。使用它进行小的更改（对每个设备进行小的调整）

您可能还希望 styles.css 仅规范化一些已设置的样式。或者，您可以将其作为 custom.css 文件

的一部分

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

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

What should be the correct way to show div in desktop view and mobile view through media query

html

css

media-queries