【发布时间】：2012-07-09 20:32:26
【问题描述】：
我一直在处理一个页面，该页面具有两种布局，具体取决于用于查看页面的设备的宽度：
/*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。
【问题讨论】：
-
如果您使用 PHP、Python、Java、.NET 等来提供页面，那么您可以使用检测函数来确定用户访问网站的形式。然后，您可以将用户重定向到网站的移动版本或移动模板。
-
目前，它是在 HTML 中严格定义的，最终应该在 PHP 中定义（我可以看到它有效）。然而，在我走到这一步之前，我想在“纯 HTML”中安排一些东西。
-
别以为你可以用纯html的方式来做。您可以使用 javascript 来检测浏览器并仅插入 html。
标签： html css mobile media-queries