1.公共样式里面封装
@mixin media-lg() {
@media screen and (min-width: 1200px){
@content;
}
}
//md--≥992 响应式
@mixin media-md() {
@media screen and (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
//sm--≥768px 响应式
@mixin media-sm() {
@media screen and (min-width: 768px) and (max-width: 991px) {
@content;
}
}
//xs--<768px 响应式
@mixin media-xs() {
@media screen and (max-width: 767px){
@content;
}
}
- 文件引用
<style scoped lang="scss">
.filter-item{
width: '100px';
@include media-lg() {
width: '1000px';
}
@include media-md() {
}
@include media-sm() {
}
@include media-xs() {
}
}
</style>
