記述例
$numToPX(150)
$numToPX(80, true)
$numToPX(80, 1)
戻り値
○引数が1個の場合
・算出結果を数値で返す。
○引数が2個の場合
・算出結果を単位付きの文字列で返す。
注意点
【px_vw値とは？】
デバイスの画面幅が不定のスマホでコーディングする際に、どんなデバイスでも相対的なサイズを取得しやすいように考慮してpx値とvw値を相互に変換する関数。Sassで以下の @function を用意して使用する。
@function px_vw($num) { //引数$numにはデザイン上でのサイズを指定
$viewport: 375; //幅375pxを基準にデザインした場合
$mathVW: $num / $viewport * 100vw; //$numをvw値に変換
@return round($mathVW * 1000) / 1000; //小数点以下を3桁に制御して返す
}
@function px_vw($num) {
// ↑ 引数$numにはデザイン上でのサイズを指定
// ↓ 幅375pxを基準にデザインした場合
$viewport: 375;
// ↓ $numをvw値に変換
$mathVW: $num / $viewport * 100vw;
// ↓ 小数点以下を3桁に制御して返す
@return round($mathVW * 1000) / 1000;
}
この @function を介すことで、画面幅が異なるデバイスでも、画面幅に対して同じ比率の値を取得できる。
例えば、画面幅375pxのデバイスでも画面幅428pxのデバイスでも、px_vw(125)では、33.333vw(全幅の1/3)という値が取得できる。
なお、パソコン用のSassでは以下の @function を用意することでpx_vw値をpx値と等価として処理できる。
@function px_vw($num) {
@return $num * 1px; //px単位付きとして返す
}
動作サンプル
基準デバイス幅を375pxに設定してから、指定したpx_vw値をpx値に変換して出力する。
※ブラウザ幅に対して相対的に変化する数値になる。
Javascript :
$initNumToVW(375);
var num1=$numToPX(375);
var num2=$numToPX(50,true);
基準デバイス幅を1000pxに設定してから、指定したpx_vw値をpx値に変換して出力する。
※ブラウザ幅に対して相対的に変化する数値になる。
Javascript :
$initNumToVW(1000);
var num1=$numToPX(375);
var num2=$numToPX(50,true);
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。