SCSS 計算響應式寬高
前言、
前提的情境，
使用 Media Query 來分別套用寬度 760px 上下的 CSS 。
在寬度760px以上的時候，該區塊在頁面的左側，
在寬度759px以下的時候，該區塊佔滿著個頁面。
而為了不重複去算所有的寬度，
這邊以750px以上的寬度為基準，利用 scss 的 @function 與 @mixin 來計算寬高與繼承 CSS
一、使用 @function 計算寬高
寫兩個 function，分別用來計算 vw, vh
第一個參數是要計算的寬高，
第二個參數是要計算的倍率。
@function vw($vw, $calcvw) {
$result: 1;
$result: $vw * $calcvw;
@return $result;
}
@function vh($vh, $calcvh) {
$result: 1;
$result: $vh * $calcvh;
@return $result;
}二、使用 @mixin 管理屬性
寫一個 @mixin 裡面放兩種 Media Query 會重複使用的 CSS
傳入兩個參數，分別是 vw, vh 的計算倍率。
調用 vh 與 vw 的時候使用 @function 來進行計算。
@mixin main($calcvw, $calcvh) {
.test{
height: vh(90vh, $calcvh);
width: vw(26vw, $calcvw);
}
}三、使用不同的 Media Query 引用 @mixin
在 Media Query 設定寬高的倍率參數並引用 @mixin main
@mixin main 再將兩個參數調用 @function 來進行計算
@media (max-width: 759px) {
$calcvw: 100 / 26;
$calcvh: 90 / 87.4;
.main {
@include main($calcvw, $calcvh);
}
}
@media (min-width: 760px) {
$calcvw: 1;
$calcvh: 1;
.main {
@include map-trip($calcvw, $calcvh);
}
}