3

デスクトップと iPhone の両方に表示される Web サイトがあり、メディア クエリを使用してさまざまなスタイルシートを提供します。たとえば、常に reset.css をロードします。ユーザーがブラウザ ウィンドウのサイズを変更する場合) 代わりに iphone.css をロードしますが、desktop.css をロードしないでください。ユーザーが iPhone を移動したかどうかに基づいて、orientation.css ファイルも追加します。

例えば

/*

    Theme Name: mywebsite

*/

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "desktop.css";
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "iphone.css";

    @media all and (orientation:portrait)
    {
        @import "iphone-portrait.css";
    }

    @media all and (orientation:landscape)
    {
        @import "iphone-landscape.css";
    }
}

Web サイトを構築する方法のため、すべてスタイルシート内で行う必要があり、HTML で 1 つの css ファイルのみを使用したいのです。

誰でも私が望むものに修正するのを手伝ってもらえますか? 乾杯。

4

2 に答える 2

2

@importは、CSSの他のすべてのコンテンツの前に配置する必要があります。

HTMLにCSSファイルを1つだけ必要な場合は、それらすべてのインポートをコピーして貼り付け、インポートを呼び出そうとしている場所に貼り付けてください。

// css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    // css for desktop
}
...
于 2011-03-16T19:27:48.357 に答える
1

デスクトップ用の css をインラインとして使用し、それを iphone 用の css で上書きしないのはなぜですか? さらに、デスクトップはこれらの寸法 (min-device-width: 320px) および (max-device-width: 480px) よりもはるかに広いです。(min-device-width: 320px) と (max-device-width: 480px) は、iPhone/スマートフォンの寸法です (少なくともほとんどの場合)。したがって、コードは次のようになります。

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";
}

//1024px - max width of an ipad, min-device-aspect-ratio - detects desktop
@media all and (min-width: 1024px) and (min-device-aspect-ratio: 1/1)
{
@import "desktop.css";
}
于 2012-08-15T17:24:43.430 に答える