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

您可以在某些元素上以有限的方式使用它们，例如a，area或链接，例如：http://www.w3schools.com/tags/att_media.asp

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

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

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

1 个答案: