Google Chromeの「デベロッパーツール」というものを使います。
Google Chromeを開いた状態で以下のショートカットキーを押してください。
Windowsなら「Ctrl + Shift + I（←アルファベットのアイ）」
Macなら「comand + option + I（←アルファベットのアイ）」
上の画像のような表示になったと思います。
左にサイトが表示され、右になんか色々文字が書かれています。
右の色々文字が書かれている部分を「Dock（ドック）」といいます。
このような表示になることもあります。
上の部分にサイトが表示され、下の部分にDockが表示されています。
Dockの位置はお好みで決めていいです。
ここではDockの位置を右に設定しています。
①上の画像のように「iPad」と表示されているところをクリックします。デフォルトでは「iPad Pro」と表示されているかもしれません。
②プルダウンが表示されるので、その中の「iPhone6/7/8」をクリックします。
サイトがスマホ表示になります。
このサイトはiPhone6、7、8だと、上の画像のような見た目になります。
先ほどのプルダウンから「iPad」を選択して、iPadの表示にしてください。
上の画像のように「rotate」ボタンを押すことでiPadを縦にした時の表示とiPadを横にした時の表示を確認できます。
上のところを見ると数字が書いてあります。
iPadの場合、以下のようになります。
縦表示：縦 x 横 =（768px） x （1024px）
横表示：縦 x 横 = （1024px） x （768px）
サイトを作る時は「スマホ表示」と「PC表示」を分けて作ります。
「スマホ表示」と「PC表示」を分けて考える時に、「768」や「1024」という数字をよく見ることになると思います。
覚えておくことをおすすめします。
以下の記事では、 デベロッパーツールを駆使して実際にレスポンシブサイトを作っていきます。
記事は以上です。