自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Viewportの設定

レスポンシブ対応するために忘れがちなので、viewportの指定のメモです

f:id:kslabo51:20191210232746j:plain

 

Viewport  

サイトの表示領域をスマホの画面幅に合わせる設定をする場合はhtmlのhead内に下記の一行を入れればOK

 

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

 

ブレークポイント  

 

スタイルが切り替わるときのviewportの幅。

viewportの幅ごとのスタイルを指定したい際はメディアクエリを使用する



例)

f:id:kslabo51:20191210232557p:plain

※画面幅が600px〜800pxの間で背景色がスカイブルーになる