媒体查询scss

使用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('设备');
    其他内容
}