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

Question

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

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

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

score 2 · Accepted Answer

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

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

您可能需要阅读使用 CSS 检测不同的设备平台以获取某些相关内容。

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

4 回答 4