移动 Css 和桌面 Css 设置

【问题标题】：mobile Css & Desktop Css set-up移动 Css 和桌面 Css 设置
【发布时间】：2014-01-18 11:00:06
【问题描述】：

我设置了桌面和移动 Css，我将桌面放在 index.html 上，将移动放在 m.index.html 上，但是桌面/笔记本电脑和移动设备上都出现了桌面。我怎样才能让移动设备工作

【问题讨论】：

你是如何包含 css 的？
你确定你真的点击了 m.index.html 吗？
当我加载 m.index.html 我看到 mobile.css 和 reset.css 当我加载 index.html 我看到 desktop.css 和 reset.css
developer.mozilla.org/en-US/docs/Mozilla/Mobile/…
我正在使用 chrome 查看源代码...

【解决方案1】：

您不需要单独的 html 和 css 文件。

将视口元标记作为Seth McClaine 建议添加到您的html 的<head> 元素中，并为平板电脑/移动设备使用media queries 单独的css :-)- 有点像这样：

// main css
.foo {
  width: 1000px;
}

// Mobile:
@media (max-width: 600px) {
  .foo {
     width: 500px;
  }
}

【讨论】：

// 桌面 css .foo { width: 1000px; } // 移动 .css: @media (max-width: 600px) { .foo { width: 500px; } }