4

ユーザーがブラウザのサイズを変更すると、CSSメディアクエリが機能しないと思いますか？メディアクエリを有効にするには、ユーザーはページを更新する必要がありますか？おそらくJSでメディアクエリを更新するにはどうすればよいですか？現在、JSを使用してサイズ変更時にウィンドウサイズを検出していますaddClass()

4

1 に答える 1

16

MediaQueries が機能するため、または画面サイズ/ビューポートを検出するために JS は必要ありません。また、MediaQuery の結果を表示するためにブラウザを更新する必要はありません。

詳細情報と MediaQueries の使用方法については、この記事を参照してください。

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

おそらく、これを実現する最も簡単な方法は、HTML の head に別の MediaQueries を指定することです。

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />

メイン スタイルシート内で MediaQueries を使用することもできます。

@media screen and (max-width: 350px) {  /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
   .content{
       padding:6px;
   }
}

MediaQueries をよりよく理解するために、時間をかけて上記の記事を読むことを強くお勧めします。それらの最適な使用方法を理解すると、それらが非常に貴重であることがわかります。

于 2011-03-04T04:02:02.613 に答える