如果浏览器尺寸小，则完全更改站点答案

【问题标题】：Change site completely if browser size is small如果浏览器尺寸小，则完全更改站点
【发布时间】：2012-08-04 14:42:40
【问题描述】：

我目前在我的 CSS 中使用媒体查询，但我的网站看起来仍然很糟糕。有没有办法先确定浏览器的宽度，然后加载不同的索引文件？

在这里发布一些代码是我的媒体查询：

@media screen and (max-width: 600px) {
  .topbar{
    opacity: 0;
  } 
....
}

【问题讨论】：

“看起来很糟糕”是什么意思？有什么特别的问题吗？
我以为我很清楚。是的，有一个特殊的问题：我不能完全控制不同的 CSS。我在问我是否可以根据浏览器大小加载不同的索引文件，而不仅仅是不同的 css，老实说，这并没有做太多。我想为手机、不同的 div 等完全更改我的网站。
我还没有一个设计是我无法通过使用媒体查询的 CSS 来改变的——你一定是做错了什么（要么是结构糟糕的 html，要么你缺少一些 css 知识)。
我确定我缺少一些 css 知识（我是初学者）。但是，例如，您如何使用 css 制作地图标签？或使用不同的元标记？（这是我的客户要求的）

【解决方案1】：

为不同的屏幕尺寸加载不同的 css 文件可能是一个想法；本质上将媒体选择从 css 移动到 html：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">

您可能想阅读Detect different device platforms using CSS 了解一些相关内容。

【讨论】：

【解决方案2】：

我想说对构建你的 CSS 做更多的研究，但要回答你的问题：

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>

【讨论】：

【解决方案3】：

通常，您希望为您的网站使用相同的 .html 文件，然后使用 CSS 专门针对桌面或移动设备进行自定义。我知道您可能对这两个站点有非常不同的想法，但是如果您的标记（html 代码）足够好，这一切都可以在纯 CSS 中完成。查看CSS Zen Garden 了解 CSS 的强大功能。

如果您想完全重置移动网站的 css，只需将旧 css 包装在针对屏幕screen and (min-width: 601px) 的媒体查询中，您会发现您的移动网站完全没有样式

【讨论】：

【解决方案4】：

css与根据浏览器宽度加载不同的索引文件无关。

如果您想使用 @media 规则为元素设置不同的样式，请确保将它们设置为靠近页面的底部，换句话说 - 在主要样式，否则 - 它们将被简单地覆盖。

【讨论】：