css扩展语言通过变量声明媒体查询

发表于 更新于 分类于 本文字数： 90 阅读时长 ≈ 1 分钟

scss

1
2
3
4
5
6
$mobile: 'only screen and (max-device-width: 720px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px)';

@media #{$mobile}{
    font-size: (100vw/7.5);
}

Less

1
2
3
4
5
@mobile: ~"only screen and (max-device-width: 720px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px)";

@media @mobile{
    font-size: (100vw/7.5);
}

postcss

1
2
3
4
5
6
@custom-media --mobile only screen and (max-device-width: 720px),
                       only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px);

@media (--mobile){
    font-size: (100vw/7.5);
}