レスポンシブウェブデザインのメディアクエリのオススメの書き方 [無料ホームページ作成クラウドサービス まめわざ]

デバイスの幅に応じてCSSを変化させるレスポンシブウェブデザインは、CSSのメディアクエリのという仕様によって実現しています。 #css {PC向け} @media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} } @media (max-width: 767px) { #css{スマホ向け} } といった感じです。 {PC向け}のところに主だったルールを記載し、@media以下で、それぞれ対象向けにルールを微調整する、という書き方が主流かと思います。たとえば以下のようになります。

[kdmgs110]

media query

[lingling_yas]

“1020px”