我可以在 HTML 页面中使用 @media 吗？

Question

我想在我的 html 页面中使用 @media，但我不知道这是否可行。

我见过 W3schools 这样做：

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

所以我想也许我可以这样做：

<form>
    <input id="submit" type="submit" value="zoeken" media="(min-width: 613px)">
    <input id="submit" type="submit" value="*" media="(max-width: 613px)">
    <input type="text" name="search" placeholder="Artikelen..">
</form>

所以我试着让 1 按钮显示它是否低于 613px，另一个如果它高于 613px。但它只是显示它们彼此相邻。这个媒体的东西只能用<picture>和<video>吗？

---

更新

答案告诉我只能使用某些标签。

我可以使它与媒体查询一起使用display:none，例如：

<form>
    <input id="submit" type="submit" value="zoeken" class="bigger680">
    <input id="submit" type="submit" value="..." class="smaller680">
    <input type="text" name="search" placeholder="Artikelen..">
</form>

<style>
    @media only screen and (max-width: 680px) {
        .bigger680{
            display: none;
        }
    }

    @media only screen and (min-width: 680px) {
        .smaller680{
            display: none;
        }
    }
</style> 

Answer 1

您可以以有限的方式在某些元素（例如区域或链接）上使用它们，如下所示： http: //www.w3schools.com/tags/att_media.asp

但我不推荐这样做，因为它违反了关注点分离。HTML 旨在组织页面结构，其中 CSS 负责这些元素的呈现。您应该使用 CSS 类/id 来应用我们的 CSS。

它还为您提供了更大的灵活性，因为可以不受限制地将媒体查询应用于每个元素。使用内联方法，您可能会在 html 文档中进行一些查询，在我们的样式表中进行其他查询。