サイトを制作時に「max-margin、min-margin、max-padding、min-padding」があればなと思う事がよくあります。今のところはそのようなcssプロパティーは存在しないので、Sass関数を使ってメディアクエリでいい感じに実装したいと思います。
メディアクエリで代替え案を考える
ウィンドウの横幅を100として、何%(vw)で伸縮するかを決め、最小値と、最大値からブレイクポイントを計算します。
例)
- 最大値: 32px;
- 最小値: 8px;
- 流動値: 2vw;
最小値のに対してのブレイクポイントの求め方
※数値に単位があるためこのままでは利用できません。
@media (max-width: (100 / 2vw) * 8px - 0.02) {
property: 8px;
}
流動値(2%)の範囲のブレイクポイントの求め方
※数値に単位があるためこのままでは利用できません。
@media (min-width: (100 / 2vw) * 8px) and (max-width: (100 / 2vw) * 32px) {
property: 2%;
}
Sass関数(min-margin、max-margin, min-padding、max-padding)
最大値をベースに先ほどの式を当てはめていきます。単位があると計算できないので、単位を削除する関数とブレイクポイントをpxで計算しているのでem、remをpxに変換する関数も一緒に用意します。
// 値から単位を削除
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// pxに変換
$base-size: 16px; // 1emのpxサイズ
@function topx($size, $base-size: $base-size) {
$unit: unit($size);
@if $unit == "em" {
@return strip-unit($size) * $base-size;
}
@else if $unit == "rem" {
@return strip-unit($size) * $base-size;
}
@else {
@return $size;
}
}
min-margin、max-margin
@mixin minax-margin($prop: margin, $min: 8px, $max: 32px, $vw: 2vw) {
$min: topx($min); $max: topx($max);
#{$prop}: $max;
@media (min-width: strip-unit(100 / $vw) * $min) and (max-width: strip-unit(100 / $vw) * $max) {
#{$prop}: $vw;
}
@media (max-width: strip-unit(100 / $vw) * $min - 0.02) {
#{$prop}: $min;
}
}
min-padding、max-padding
@mixin minax-padding($prop: padding, $min: 8px, $max: 32px, $vw: 2vw) {
$min: topx($min); $max: topx($max);
#{$prop}: $max;
@media (min-width: strip-unit(100 / $vw) * $min) and (max-width: strip-unit(100 / $vw) * $max) {
#{$prop}: $vw;
}
@media (max-width: strip-unit(100 / $vw) * $min - 0.02) {
#{$prop}: $min;
}
}