◎ レスポンシブデザイン

画面の大きさとブレイクポイント

【ブラウザの画面サイズとdevice pixel ratioを確認する】あなたのスマホ・pcの大きさを調べよう

▲お手元のスマートフォンで、QRコードを読み込んでみよう。


デバイスピクセル比(devicePixelRatio)
デバイスピクセル比とは画像の1ピクセルをデバイスで何ピクセルとして描画するか表した数値です。

例えばRetinaディスプレイのような超高解像度でこの機能を使わずに、画像ピクセル=デバイスピクセルとして描画すると画像や文字が小さ過ぎて使いづらくなります。iPhone3の2倍の解像度を持つiPhone4では、通常に描画すると4倍(縦2倍×横2倍)のスクリーンサイズになります。

https://www.mydevice.io/#compare-devices

スマートフォンに対応する仕組み

smart_phone

ビューポートとは

info001

CSSの記述

RWD_CSSの記述方法

ブレイクポイントとは
ブレイクポイントとは、CSSソース内で適用させるスタイルを区切るモバイルサイズのポイントを指します。たいていは画面の横幅サイズを使ってブレイクポイントが作られます。現在、モバイルの大きさは様々ですので、レスポンシブWebデザインを採用する際には、ある画面サイズを境界にしてスタイルを分割したい場合が多くあります。そのサイズがブレイクポイントです。例えば「画面の横幅600px未満に適用するスタイル」と「画面の横幅600px以上に適用するスタイル」とを切り分ける場合は、ブレイクポイント600pxに切り分けます。ブレイクポイントは複数個を併用できます。あまり多くのブレイクポイントを定めず、1-2サイズで切り分ける方が、コーディングしやすいと思います。