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

2023年4月21日 528次阅读

我想在我的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>才能使用这种媒体内容吗？和 ？

更新

答案告诉我,只有一些标签才有可能.

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

最佳答案 您可以在某些元素上以有限的方式使用它们,例如a,area或link,如下所示：
http://www.w3schools.com/tags/att_media.asp

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

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

点赞