CSSメディアクエリについて（書き方・読み込まれ方）

私も一度レスポンシブサイトを作成したことがあります。その時は、モバイルファーストで記述しました。
書き方としては、モバイル用を列挙し、その後、タブレット用とPC用とそれそれをひとまとまりにしました。

しかし、最近のサイトを見ていると、CSSの1つの指定に対して、タブレット用とPC用を記述しているサイトを良く見ます。（saaaのmixinを利用しているようです）
これだと、コード量が無駄に多くなり、モバイルの表示速度に影響があると思うのですが・・・

そこで、質問です。
メディアクエリのそれぞれの指定は、どの端末でもとりあえず一度は読み込まれるのでしょうか？それとも、モバイル端末の場合、タブレット用とPC用は読み込まれないのでしょうか？


アドバイスをいただける方よろしくお願いいたします。

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2017/09/07 11:00

>>コード量が無駄に多くなり、モバイルの表示速度に影響があると思うのですが・・・

その通りです。
ですので、多くのレスポンシブサイトではhtmlのCSSメディアクエリで読み込むCSSを変える様にしています。

例：2個を振り分ける例

<link rel="stylesheet" media="screen and (min-width: 641px)" href="style-css-pc.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="style-css-smart.css" />

この回答へのお礼

こういうことをしているんですね。
ありがとうございました。

大変参考になりました。

お礼日時：2017/09/09 09:43