HTML - HTML 的 "CSS Media Query"行为？

Question

我一直在处理一个页面，该页面有两种布局，具体取决于用于查看页面的设备的宽度:

/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/

}

这种方法本质上是在整个页面中采用各种“网络”和“移动”div，并根据任一布局的需要显示、隐藏或更改它们；然而，虽然“网络”div 被隐藏，但它们仍由移动设备加载，可能会减慢页面加载速度。

我的第一个想法是，如果我只能定义“移动”div 而不是“网络”div，那么我就可以避免加载所有这些附加元素。那么对于HTML，有没有类似于CSS媒体查询的方法呢？或者，是否可以根据页面显示设备的宽度定义两种不同的 HTML 布局？

---

编辑:至少就图像和图形而言，更好的方法可能是使用 CSS 来定义图像而不是 HTML。因此，而不是做:

<div id="img"><img src="URL"></div>

...并试图隐藏 div，您会采用这种方法:

<div id="img"></div>

和...

div#img {
background: none;
}

/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/

div#img {
background: url(URL);
    height: 400px;
    width: 600px;
}
}

因此，移动版本不会加载图像，我们仍然只使用 CSS。

Answer 1

Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?

那是采取恕我直言的路线。 HTML 没有类似的机制来为视口(viewport)定义不同的规则集。