2

迅速なモバイルアップグレードが必要な古いサイトがあります。私はこれを調査し、新しいプロジェクトを開始するときにこれを行う方法について多くの素晴らしい答えを見つけました。誰かがこれを行った経験があるかどうか、もしそうなら、この種の仕事に最適な方法は何かを知りたいと思いました。Modernizerを試しましたが、メディアクエリ（Modernizer.mq）でtrueを返すことができません。

これが私が試したコードです：

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

1 に答える 1

2

有効なメディアクエリはですonly screen and (max-device-width: 480px)。

唯一は今思い出せないバグに使われていますが、他のブラウザでは何も壊れないので大丈夫です。

max-widthの指定を角かっこで囲む必要があります。

ただし、cssファイルのロードにJavascriptを使用しないでください。あなたはそれらを含めることができます

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

メディアクエリをサポートしていないブラウザのフォールバックが必要になる場合があります。

于 2012-08-01T14:55:16.353 に答える