エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

スマホを横に変えた時の幅に対応するために。cssでvwとvhを使う。【130日目】

こんな時使える。

スマホで横幅いっぱいの画像を表示させようとして、
縦向きから横向きに切り替えた時に、画像の大きさが変わらない時とか。

同じ条件で、divの横幅が変わらない時とか。

どうするの

width: 100%;

とか書いていたのを

width: 100vw;

に変える。

するとどうなる

画面を縦向きに表示させたあと、横に方向を変えても、画像の幅が変わってくれる。

これなに

参考先。

ブラウザの横幅や縦幅取ってきてくれるよ。

dev.classmethod.jp

www.webprofessional.jp