使用scss编写混入
//媒体查询响应式开发
$breakpoints: (
'phone':(
320px,
480px,
),
'pad':(
481px,
768px,
),
'ntoebook':(
769px,
1024px,
),
'desktop':(
1025px,
1200px,
),
'tv':(
1201px,
)
);
@mixin respodTo($breakname) {
$bp: map-get($breakpoints, $breakname);//根据传入的参数获取数组中对应的值
@if type-of($bp)=='list' {
$min: nth($bp, 1);
$max: nth($bp, 2);
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
@else {
@media (min-width: $bp) {
@content;
}
}
}
方法
.title{
@include respodTo('设备');
其他内容
}