Lopan.jp

とりとめないメモ。
絶対配置をレスポンシブしたいとき

キービジュアルのところとか、デザインによっては、要素を絶対配置してアニメーションしたい時とか。デスクトップのデザインとモバイルのデザインはあるけれど、タブレットのデザインがない時とか。デスクトップのレイアウトのまま、タブレットサイズに収めたい時とか。そんな時に応急措置として使えるレシピ。

要素を絶対配置したいときとは

一枚絵だけれど、イラストひとつひとつを順番に表示させたい、というようなとき。
このままだと、横幅の狭いタブレット端末などで、横スクロールバーが出ちゃうし、背景途切れちゃうし、格好悪いですね:(

画面サイズに合わせて伸縮したい

例えば、「ウィンドウの横幅が1200px以下の時にはウィンドウ幅いっぱいのまま伸縮させたい」という時。
ウィンドウ幅が1200px以下の時には要素の横幅は「100vw(=横幅いっぱい)」ということになります。

1200pxが100vwになる

ということは、120px幅の要素は、ウィンドウ幅が1200px以下の時には、10vw幅になる。横幅に限らず高さ位置もなにもかも、1200px100vwだから、120px10vwになる…。
ということは、ウィンドウ幅が1200px以下の時、要素のサイズは120 / 1200 * 100vwという計算で表せますね:D

1200pxの時に120pxの要素は、100vwの時には10vwである

つまり、ウィンドウ幅が1200px以下の時に、この計算をそのまま、レスポンシブさせたい要素に指定し直してやれば、ウィンドウ幅に合わせて相対的に伸縮するようになるって寸法です;)

以下のような具合で指定します。ここでは、イラスト全体の高さ(500px)を、ウィンドウ幅が1200px以下の時に上手に伸縮するよう、指定し直しています。

.absonsive {
	height: 500px;
}
@media screen and (max-width: 1200px) {
	.absonsive {
		height: calc(500 / 1200 * 100vw);
	}
}

さらに、個々のイラストのサイズや位置も、同じように、こつこつ置き換えてゆきます…。

サイズを計算式に置き換える(一部抜粋)
.absonsive h3 {
	top: 72px;
	left: 109px;
}
.absonsive h3 .l {
	font-size: 74px;
}
.absonsive h3 .-l5 {
	font-size: 34px;
}
@media screen and (max-width: 1200px) {
	.absonsive h3 {
		top: calc(72 / 1200 * 100vw);
		left: calc(109 / 1200 * 100vw);
	}
	.absonsive h3 .l {
		font-size: calc(74 / 1200 * 100vw);
	}
	.absonsive h3 .-l5 {
		font-size: calc(34 / 1200 * 100vw);
	}
}
︙

ぜんぶ置き換えたら、出来上がり!
ウィンドウ幅に合わせて綺麗に伸縮するようになりましたねー;D

両脇に余白がある時

全幅ではなくて、両脇に余白がある場合には、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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください