ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です) 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト:980px以上用(PC用)の記述 */ @media screen and (max-width: 979px
![レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40](https://cdn-ak-scissors.b.st-hatena.com/image/square/0cd6428c75c8defb1b94688f91e21293d5930391/height=288;version=1;width=512/http%3A%2F%2Fkatoshun.com%2Fblog%2Fwp-content%2Fuploads%2F2013012701-150x150.jpg)