31 lines
731 B
SCSS
31 lines
731 B
SCSS
// 设计稿基准尺寸（根据你的实际设计稿调整，一般是 1920px 或 375px）
|
||
$design-width: 1920px; // 桌面端设计稿宽度
|
||
$design-height: 1080px; // 桌面端设计稿高度
|
||
|
||
// px 转 vw 函数（核心）
|
||
@function vw($px) {
|
||
@if unitless($px) {
|
||
$px: $px * 1px;
|
||
}
|
||
@return ($px / $design-width) * 100vw;
|
||
}
|
||
|
||
// px 转 vh 函数
|
||
@function vh($px) {
|
||
@if unitless($px) {
|
||
$px: $px * 1px;
|
||
}
|
||
@return ($px / $design-height) * 100vh;
|
||
}
|
||
|
||
// 响应式字体大小 mixin（适配不同屏幕）
|
||
@mixin font-size($px) {
|
||
font-size: $px;
|
||
font-size: vw($px);
|
||
}
|
||
|
||
// 响应式尺寸 mixin（宽/高/间距通用）
|
||
@mixin size-vw($width, $height: $width) {
|
||
width: vw($width);
|
||
height: vw($height);
|
||
} |