- v-layout と v-flex を使用する(full fluid + conditional)
<v-layout wrap>
<v-layout>
img {
width: 100%;
height: auto;
}
** layout にwrap を忘れないように。子コンポーネントがlayoutに収まるようになる。
ref: https://vuetifyjs.com/en/components/grids
@media (max-width: 1000px) {
img {
width: 100px;
height: auto;
}
}
問題点：条件に応じて絶対値を指定しているだけなのでエラーが出そう。エラー完全対応させたら条件分岐が多くなりそう。
ref: https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries
vw, vhはviewportに対する割合。100vwで画面いっぱい。
# 1 full fluid
img {
width: 10vw;
height: auto;
}
問題点：上記のようにvw, vhだけで使用してもいいケースもあるが完全にレスポンシブさせるとでかい画面で大きすぎたり、小さい画面で小さすぎたりする。
従って、
#2 semi-full fluid
max-width, min-widthを定義したり、
img {
width: 10vw;
min-width: 100px;
height: auto;
}
問題点：例えば画面が大きくなった時、表示カラムを多くしたりする場合、コンテンツのwrapper自体は小さい画面の時より狭まるときがあり、その場合コンテンツの表示域が小さいのに画像や文字が大きくなってしまう問題が出る。
#3 full fluid
img{
width: calc(80px + 2vw);
height: auto;
}
最低値＋変動幅または、最大値ー変動幅をして調整する。
問題点：例えば画面が大きくなった時、表示カラムを多くしたりする場合、コンテンツのwrapper自体は小さい画面の時より狭まるときがあり、その場合コンテンツの表示域が小さいのに画像や文字が大きくなってしまう問題が出る。vw, vhはウィンドウに対する割合であって、コンテンツ表示域に対する割合ではないので、コンテンツの追加、margin, padding等々で複雑化したときに最低値＋変動幅の設定がメンテしにくくなる。
ref: https://coliss.com/articles/build-websites/operation/css/font-size-used-responsive-scales.html
従って最初のflex-boxを使った方法が最適(楽)。
#3 にメディアクエリを掛け合わせてもいいが。
適宜これらを組み合わせてなるべく楽に実装するといい。
** フォントの場合、%指定が要素の幅ではなく、親要素のフォントサイズに対する割合になるので%によるfluid化はできない。
個別にvwで値を指定するしかない。その場合max-font-size的なものが無いのでメディアクエリで条件分岐させる必要がある。
** marginをレスポンシブに設定したい場合、空のv-flexを使用する
<v-layout wrap>
<v-flex xs10 md8>メインコンテンツ<v-flex> // カラム変化に対応可
</v-layout>
