//响应式断点
$w-width-sm:476px;
$w-width-md:767px;
$w-width-lg:900px;
$w-width-xl:1200px;
$w-fluid:100vw;
//小屏幕下的内边距
$s-screen-padding:20px;
// 响应式模块化
/**
用法:
@include respond-to(xs) {
//样式 或者 样式类块
}
**/
@mixin respond-to($breakpoint) {
@if $breakpoint == xs { //屏幕小于476px xs
@media (max-width: $w-width-sm) {
@content;
}
} @else if $breakpoint == sm { //屏幕在477 - 767之间 sm
@media (min-width: $w-width-sm + 1) and (max-width:$w-width-md) {
@content;
}
} @else if $breakpoint == md { //屏幕在768 - 900之间 md
@media (min-width: $w-width-md + 1) and (max-width: $w-width-lg) {
@content;
}
} @else if $breakpoint == lg { //屏幕在901 - 1200之间 lg
@media (min-width: $w-width-lg + 1) and (max-width: $w-width-xl) {
@content;
}
} @else if $breakpoint == xl { //屏幕大于 1200 xl
@media (min-width: $w-width-xl + 1) {
@content;
}
}
}
// 用于多个断点
/**
用法:
@include respond-to-multiple(xs, sm) {
// sm 和 xl 共同的样式
}
**/
@mixin respond-to-multiple($breakpoints...) {
@each $breakpoint in $breakpoints {
@include respond-to($breakpoint) {
@content;
}
}
}
// 版心 respond-to用法
.w{
width:$w-width-xl!important;
margin:0 auto;
@include respond-to(xs) {
width: 100%!important;
max-width: $w-width-sm;
}
@include respond-to(sm) {
width: 100%!important;
max-width: $w-width-md;
}
@include respond-to(lg) {
width: 100%!important;
max-width: $w-width-xl;
}
}
.w-fluid{
width: $w-fluid!important;
}
sass响应式断点函数
最新推荐文章于 2024-08-30 11:12:09 发布