我可以在我的 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>

所以我试着让第一个按钮显示它是否低于 613 像素，另一个如果它高于 613 像素。但它只是显示它们彼此相邻。这个媒体的事情只有<picture>和<video>才有可能吗？

---

更新

Answer 告诉我只有使用一些标签才有可能。

我可以使用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

您可以在某些元素（例如此处记录的 a、区域或链接）上以有限的方式使用它们：http://www.w3schools.com/tags/att_media.asp

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

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