レスポンシブで使うmixin
自分がレスポンシブで使っているmixinのコードを紹介します。
割り算はDart Sass 2.0.0に対応した書き方にしています。(詳細はこちら)
PCでvw指定、SPでvw指定ができるmixin
基本的な計算方法としてはPCとSPともに
デザイン上の数値 ÷ デザイン上の横幅サイズ × 100 (単位[vw])
としています。
今回の例ではPCデザイン1400px、SPデザインが375pxで作られている想定でのmixinになります。
@use 'sass:math';
@use './_mixin.scss' as mixin;
/* デザインサイズ → 必要に応じて変更*/
//PCデザイン横幅
$mediaQueryPcBase: 1400;
//SPデザイン横幅
$mediaQuerySpBase: 375;
//PC vw指定 SP vw指定
@mixin mediaQueryPcVwSpVw($property,$valuePC,$valueSP) {
// margin: 10 10 20 10 のようにショートハンドで書きたい場合
@if(type-of($valuePC) == list){
// PCの場合
@media all and (min-width: 769px) {
$vwNumber:();
@for $i from 1 through length($valuePC) {
@if(type-of(nth($valuePC,$i)) == number){
$vwNumber: append($vwNumber,math.div(nth($valuePC, $i),$mediaQueryPcBase) * 100vw);
} @else{
$vwNumber: append($vwNumber,nth($valuePC, $i));
}
}
#{$property}: $vwNumber;
}
//SPの場合
@media all and (max-width: 768px) {
$vwNumber:();
@for $i from 1 through length($valueSP) {
@if(type-of(nth($valueSP,$i)) == number){
$vwNumber: append($vwNumber,math.div(nth($valueSP, $i),$mediaQuerySpBase) * 100vw);
} @else{
$vwNumber: append($vwNumber,nth($valueSP, $i));
}
}
#{$property}: $vwNumber;
}
}
// margin-top: 10 のような場合
@else {
// PCの場合
@media all and (min-width: 769px) {
#{$property} : math.div($valuePC, $mediaQueryPcBase) * 100vw;
}
// SPの場合
@media all and (max-width: 768px) {
#{$property} : math.div($valueSP, $mediaQuerySpBase) * 100vw;
}
}
}
*注意*
#{$property}が書かれている行がグレーアウトしていますが、コメントアウトではありません!(すみません、note上の仕様なのか色が付いてくれないです…)
SCSS指定の仕方
@include mixin.mediaQueryPcVwSpVw(CSSプロパティ,PC値,SP値);
第1引数はレイアウト調整で使用するCSSプロパティであれば、基本的に入れられます。
第2引数はPC時の数値を入れられます。ショートハンドで書きたければ、ショートハンドでも書けます。
第3引数はSP時の数値を入れられます。こちらもショートハンドで書きたければ、ショートハンドでも書けます。
@use './_mixin.scss' as mixin;
/* width */
@include mixin.mediaQueryPcVwSpVw(width,400,250);
/* margin */
@include mixin.mediaQueryPcVwSpVw(margin-top,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-left,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-bottom,20,30);
@include mixin.mediaQueryPcVwSpVw(margin-right,20,30);
@include mixin.mediaQueryPcVwSpVw(margin,20 auto,20 auto);
/* padding */
@include mixin.mediaQueryPcVwSpVw(padding-top,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-left,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-bottom,20,30);
@include mixin.mediaQueryPcVwSpVw(padding-right,20,30);
@include mixin.mediaQueryPcVwSpVw(padding,20 30 30,20 20 30);
/* font-size */
@include mixin.mediaQueryPcVwSpVw(font-size,16,12);
状況に応じて、PCで%指定、SPでvw指定をしたい、またはPCでpx指定、SPでvw指定したい等いろいろあると思います、今回自分が紹介させていただいたコードを改変して計算する単位を変えてみるのもありかと思います。
あまり良い書き方ではないかもしれませんので、あくまで参考程度にみていただけたらと思います🙇♂️
参考記事
フォントや画像をvwで指定するmixin - レスポンシブしやすい設計方法
https://yumegori.com/font-img-vw-setting-method
レスポンシブWebデザインでハマりがちな%指定
https://design-spice.com/2014/03/24/percentag/
この記事が気に入ったらサポートをしてみませんか?