Question

我有一个需要快速移动升级的旧网站。我研究了这个，并在开始一个新项目时找到了许多关于如何做到这一点的好答案。我很想知道是否有人有这方面的经验，如果有的话，哪种方法最适合这种工作？我尝试过Modernizer，并且无法在任何媒体查询（Modernizer.mq）

上返回true

这是我试过的代码：

Modernizr.load([
 {
test : Modernizr.mq('screen and max-device-width: 480px'),
yep : 'css/mobile.css',
    nope : 'css/styles.css'
 ]);

Answer 1

有效媒体查询为only screen and (max-device-width: 480px)。

only 用于我现在无法回忆的错误，但它不会破坏其他浏览器中的任何内容，所以没关系。

您必须在括号之间包含最大宽度规范。

但是，您不应该依赖Javascript来加载您的css文件。你可以用

包含它们

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

您可能需要支持非媒体查询支持浏览器的后备。

为移动设备改造旧的XHTML网站？

1 个答案: