2

メディアクエリを使用して、小さな画面用にページのスタイルを書き直していました。

@media only screen 
and (min-width : 400px) 
and (max-width : 1024px) {
#container {
right:10px;
top:50px;
font-size:24px;
position:absolute;
min-height: 85%;
margin-left:auto;
width:100px;
}   
#portfolio {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;}
#whoami {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    }
#blog {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    
}
#contact {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;
}

}

そして、何も機能しませんでした.. Dreamweaver CS6互換ビューでWebページを表示しましたが、機能しなかったため、ブラウザーウィンドウのサイズを変更して確認しましたが、機能しませんでした。なぜうまくいかなかったのですか？IDでは機能しませんか?!

4

3 に答える 3

1

ヘッダーにこのメタを追加してみてください:

<meta name="viewport" content="width=device-width" />
于 2012-12-28T15:10:14.680 に答える
0

投稿されたコードはそのように機能するため、問題は別の場所にあります。たとえば、コンストラクト内のルールや、メディア クエリをサポートしないブラウザーの使用 (実際には IE 8 以前を意味します。それ以外の場合、ブラウザーのサポートは非​​常に優れています)。

状況を確認するには、最初に次のような最小限のドキュメントでテストします

<!doctype html>
<title>Testing media queries</title>
<style>
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
  body { background: green; }
}
</style>
Hello world

また、コンストラクト内のスタイル シートを取り出して無条件にしてテストし、それがまったく機能するかどうかを確認する必要があります。

于 2012-12-28T15:47:50.370 に答える
0

これは、Chrome と Firefox でも発生しました。

デフォルトがにまたはにvisibility設定されている場合に問題が発生することがわかりました（cssの影響を受ける要素の可視性はjsによって制御されました）。hiddendisplaynone

于 2016-04-18T21:25:15.107 に答える