我一直在处理一个页面，该页面具有两种布局，具体取决于用于查看页面的设备的宽度：
/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/
}
这种方法本质上是在整个页面中使用各种“web”和“mobile”div，并根据任一布局的需要显示、隐藏或更改它们；然而，虽然“web”div 是隐藏的，但它们仍由移动设备加载，可能会减慢页面加载速度。
我的第一个想法是，如果我只能定义“移动”div 而不是“web”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。