0

次のコードを含む HTML ファイルがあります。

<html>
 <head>
  <LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
 </head>

 <body>
  <span class="ipad_text">DESKTOP RED;  iPad GREEN</span>
<br />
  <span class="ipad_text2">DESKTOP BLACK;  iPad BLUE</span>
<br />
  <span class="ipad_only">iPad ONLY SHOW</span>
<br />
    <span class="ipad_only2">iPad ONLY 2</span>

 </body>
</html>

また、css フォルダーの下に 2 つの CSS ファイル (desktop.css と ipad.css) があります。desktop.css には、

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}

そして ipad.css には、

@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

何らかの理由で、これは機能しません.次のように ipad.css からコードを切り取り、desktop.css ファイルの下に貼り付けると、デスクトップと iPad の両方でページが正しく表示されます...何が間違っていますか? 2 つの CSS を別々のファイルに配置したいのですが、助けてください。

以下は完全に機能します

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}


@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}
4

1 に答える 1

1

前の答えで言ったように...

@import■他のスタイル宣言の前に来る必要があります。

しかし、あなたの場合、最初にiPadスタイルをインポートすると、おそらくすべてがデスクトップスタイルによって上書きされます。

... iPad以外のスタイルは、iPadのモバイルSafariを含むすべてのメディアに適用されるためです。iPad以外のスタイルは条件付きの後に来る@importため、インポートされるかどうかに関係なく、スタイルが上書きされます。これは通常のカスケード動作です。

于 2011-04-22T13:39:03.053 に答える