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

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);
}