とりとめないメモ。
絶対配置をレスポンシブしたいとき
キービジュアルのところとか、デザインによっては、要素を絶対配置してアニメーションしたい時とか。デスクトップのデザインとモバイルのデザインはあるけれど、タブレットのデザインがない時とか。デスクトップのレイアウトのまま、タブレットサイズに収めたい時とか。そんな時に応急措置として使えるレシピ。
要素を絶対配置したいときとは
一枚絵だけれど、イラストひとつひとつを順番に表示させたい、というようなとき。
このままだと、横幅の狭いタブレット端末などで、横スクロールバーが出ちゃうし、背景途切れちゃうし、格好悪いですね:(。
画面サイズに合わせて伸縮したい
例えば、「ウィンドウの横幅が1200px以下の時にはウィンドウ幅いっぱいのまま伸縮させたい」という時。ウィンドウ幅が1200px以下の時には、要素の横幅は「100vw（＝横幅いっぱい）」ということ。
120px幅の要素は、ウィンドウ幅が1200px以下の時には、10vw幅になるということなので、要素の横幅は120 / 1200 * 100vwという計算で表せますね:D。
つまり、ウィンドウ幅が1200px以下の時に、この計算をそのまま、レスポンシブさせたい要素に指定し直してやれば、ウィンドウ幅に合わせて相対的に伸縮するようになるって寸法です;)。
.absonsive {
height: 500px;
}
@media screen and (max-width: 1200px) {
.absonsive {
height: calc(500 / 1200 * 100vw);
}
}両脇に余白がある時
全幅ではなくて、両脇に余白がある場合には、100vwからマージン分を引いた値を掛ければ良いです:)。
両脇に20pxずつの余白がある場合には、以下のような具合。
@media screen and (max-width: 1240px) {
.absonsive {
height: calc(500 / 1200 * (100vw - 40px));
}
}サイズを全部remにする
その文書のルート要素（＝html要素）のフォントサイズを基準として相対的にサイズが適用されるという、特別な単位「rem」を使えば、ルートのフォントサイズを変えるだけで、ページ全体のサイズを一括で変更できちゃいます。
ここでは、要素のサイズや位置をすべてpxからremに置き換えて、html要素のフォントサイズを1pxとすることで、1rem = 1pxとなるようにしています。
html {
font-size: 1px;
}
@media screen and (max-width: 1240px) {
html {
font-size: calc(1 / 1200 * (100vw - 40px));
}
}
Comment & Pingback