モバイル版にしますよ

　

<meta name="viewport" content="width=device-width,initial-scale=1">

　

まずは特に考えずにこれを入れればよろしいらしい。

　

考え方としてモバイルファーストとPCファーストというのがある。

私たちはまずPCをつくったのでPCファースト。

一応主流はモバイルファースト。　

　

メディアクエリ

　

>メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。

 

>CSS の @media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

 

→htmlに追加（metaタグを書いている場所に）

　

　　<meta name="viewport" content="width=device-width,initial-scale=1">

　

→cssに追加（最終行に）

　

@media screen and (max-width: 600px){

　/*横幅が600px以下の時のスタイル*/

　body{

　　background-color: #eee;

　}

}

　

中の記述はいつも通り。

横幅が600pxになったときそのスタイルが上書きされる（灰色になる）

簡単にいうとif文みたいなもの。

　

minで指定することもあるらしい。

@media (min-width: 30em)

　

max-width: 600px

この部分をブレークポイントとも呼ぶらしい