1

所以我使用@media 查询在我的网站的移动版本上使用不同的 css 文件。这是我的html的头：

<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />

<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />

但是，我发现移动 css 只是“添加”到桌面 css，而不是仅在 mobile.css 中加载 css 规则的预期效果。例如，在 mobile.css 中有一条关于背景颜色为红色的规则，不仅会给我一些带有红色背景的未格式化的 Web 内容，而且会用红色背景渲染桌面 css。

我想完全从头开始，使用空白的 css 文件在手机上建立一个漂亮的功能性网站视图，但我不想手动撤消我为使网站适合桌面所做的许多调整. 特别是，我希望能够消除一些杂散的桌面 css 阻止网站在移动设备上以正确比例呈现的可能性。

有什么想法吗？

4

6 回答 6

3 
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />

<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
于 2012-08-03T17:57:41.487 回答
1

将您的桌面 css 包装在针对桌面的媒体查询中

于 2012-08-03T17:55:28.913 回答
0

以这样的条件方式使用您的媒体查询：

@media screen and (max-width: 800px) {
  <link to mobile stylesheet
}

@media screean and (min-width: 801px) {
  <link to full stylesheet
}
于 2012-08-03T17:56:21.277 回答
0

请注意，所有平台都将使用“@media screen”，因此您无法仅使用媒体类型进行可靠的设备检测。最常见的是，您将使用设备宽度来帮助您对客户端将是什么类型的设备进行有根据的猜测。

具有高 DPI 的设备通常会假装它们更小，因此 iPhone 3GS 和 iPhone 4（例如）都可以与同一组查询匹配。

于 2012-08-03T18:01:33.347 回答
0

无论您是链接“仅屏幕和（最大设备宽度：800px）”还是构建到您的 CSS“@media @...”

您需要封装“桌面”样式，以使移动设备根本无法识别它们。

所以基本上

only screen and (max-device-width: 800px) - for your mobile devices

和

only screen and (min-width: 801px) - for desktops
于 2012-08-03T18:07:03.013 回答
-1

如果您将移动设备放在最后，那么您可以将 CSS 重置添加到移动样式表的顶部。

于 2012-08-03T17:57:26.407 回答