35 lines
552 B
SCSS
35 lines
552 B
SCSS
// scss 全局变量
|
|
|
|
// 响应式布局
|
|
@mixin changeWidth($maxWidth:1200px) {
|
|
.container {
|
|
max-width: $maxWidth;
|
|
}
|
|
}
|
|
|
|
// 首次调用
|
|
@include changeWidth;
|
|
|
|
/* 小于1200px时 */
|
|
@media (max-width: 1200px) {
|
|
@include changeWidth($maxWidth:1000px);
|
|
|
|
// 隐藏元素
|
|
.sm-hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* 小于992px时 */
|
|
@media (max-width: 992px) {
|
|
@include changeWidth($maxWidth:900px);
|
|
}
|
|
|
|
/* 小于720px时 */
|
|
@media (max-width: 720px) {
|
|
|
|
// 隐藏元素
|
|
.xs-hidden {
|
|
display: none;
|
|
}
|
|
} |