使用sass的混合插入模式进行@media响应式媒体查询做自适应开发
// 定义混合指令并传参数
@mixin respond($breakname) {
//控制指令
@if $breakname == 'phone' {
//手机端 <=480
@media (max-width: 480px) {
//向混合样式中导入内容
@content;
}
} @else if $breakname == 'ipad' {
//ipad端 481～768
@media (min-width: 481px) and (max-width: 768px) {
//向混合样式中导入内容
@content;
}
} @else if $breakname == 'notebook' {
//ipad端 769~1024
@media (min-width: 769px) and (max-width: 1024px) {
//向混合样式中导入内容
@content;
}
} @else if $breakname == 'desktop' {
//ipad端 1025~1200
@media (min-width: 1025px) and (max-width: 1200px) {
//向混合样式中导入内容
@content;
}
} @else if $breakname== 'tv' {
//大屏 >=1201
@media (min-width: 1201px) {
//向混合样式中导入内容
@content;
}
}
}
.mz-col {
border: 1px solid $borderColor;
@include respond('phone') {
width: 100%;
height: 150px;
}
@include respond('ipad') {
width: 50%;
height: 250px;
}
@include respond('notebook') {
width: 100%;
height: 50px;
}
@include respond('desktop') {
width: 50%;
height: 50px;
}
@include respond('tv') {
width: 50%;
height: 100px;
}
}