2

我有一个需要快速移动升级的旧网站。我对此进行了研究，并找到了很多关于在开始一个新项目时如何做到这一点的好答案。我很想知道是否有人有这样做的经验，如果有的话，什么方法最适合这种工作？我尝试了 Modernizer，但无法让它在任何媒体查询上返回 true (Modernizer.mq)

这是我尝试过的代码：

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

1 回答 1

2

The valid media query is only screen and (max-device-width: 480px).

The only is used for a bug I cannot recall now, but it doesn't break anything in another browser, so that's okay.

You have to wrap the max-width specification between brackets.

However, you shouldn't rely on Javascript to load your css files. You can include them with

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

You might need a fallback for non-media-query supporting browsers.

于 2012-08-01T14:55:16.353 回答