0

こんにちは、流動レイアウト グリッド システムまたはレスポンシブ Web デザインを使用しています。

メディアクエリを使用して解像度を下げるためにすべてのサイズを設定する方法が好きですが、ここに私の質問があります。

画面解像度がどれだけ大きくても、iPhoneで表示しているユーザーは小さいバージョンを取得できるようにしますが、1000x621以上のユーザーは同じままであるため、ヘッダーh1はスクロールしません。

どんな助けでも大歓迎です、

ありがとうございました

これは私が持っているcssです

 @media only screen and (min-width: 769px){

.gridContainer {
width: 89.0217%;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: 0 auto;
}

#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

 }

 #header h1 {
text-align:right;
 }

#top_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #bottom_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

#featured_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

}

4

1 に答える 1

2

単純にメディア クエリを使用します。たとえば、次のようにします。

@media (min-width: 1000px){ 

#header h1 {
 /* blah blah ... */
}

}

したがって、ビューポートの幅が 1000px を超えるユーザーのみが、括弧内に css クラスのみを含めます。min-width または max-width で遊ぶことができます。

参照: http://www.w3.org/TR/css3-mediaqueries/

于 2013-01-23T08:00:27.093 に答える