Question

所以我使用@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中有关于背景颜色为红色的单一规则，不仅会给我一些带有红色背景的无格式网页内容，而且会以红色背景呈现桌面css。

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

有什么想法吗？

Answer 1

<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" />

Answer 2

将桌面广告资源包裹在针对桌面的媒体查询中

Answer 3

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

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

@media screean and (min-width: 801px) {
  <link to full stylesheet
}

Answer 4

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

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

Answer 5

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

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

所以基本上

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

和

only screen and (min-width: 801px) - for desktops

Answer 6

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

COMPLETELY覆盖移动浏览器的CSS？

6 个答案: