如果浏览器尺寸很小，请完全更改网站

Question

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

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

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

Answer 1

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

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

您可能需要阅读Detect different device platforms using CSS了解相关内容。

Answer 2

我想说做一些关于构建CSS的研究，但要回答你的问题：

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

Answer 3

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

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

Answer 4

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

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