Question

我有这个简单的HTML5页面：

<!DOCTYPE html>
<html>
    <head>
        <title>trial</title>
    </head>
<body>

    <p>
    <a href="500.jpg" media="screen and (max-width:500px)">here is a link</a>
    <a href="1000.jpg" media="screen and (max-width:1000px)">here is a link</a>
    <a href="1920.jpg" media="screen and (max-width:1920px)">here is a link</a>
    </p>

</body>
</html>

当我在浏览器中打开它时，显示3个指向3个图像的链接。问题是：我期望媒体查询隐藏其中的2个，因为我的屏幕分辨率是1920 x 1080。因此，如果没有<a>标签中使用媒体查询的好处，如http://www.w3schools.com/tags/att_a_media.asp中所述< / p>

Answer 1

此属性指定链接资源适用的媒体至。它的值必须是媒体查询。该属性主要有用通过允许用户代理链接到外部样式表时为其运行的设备选择最适合的设备。

source

从相关代码中，无论如何都会出现所有锚标记，但是如果您使用CSS的媒体查询，那么浏览器将仅根据设备应用该CSS。

<a> tag ? how does it work?</a>中媒体查询的好处是什么？

1 个答案: