scss SASS媒体查询

Posted 2021-05-17

$desktop: 1024px;

@mixin desktop {
             @media ( min-width: #{$desktop} ) {
                             @content;
              }
}

// OR //

$mobile: 960px;

@mixin mobile {
             @media ( max-width: #{$mobile} ) {
                             @content;
              }
}

/* Then go inside specific element and define responsive changes. */

// Example:

#main {
        float: left;
        width: 80%;

         @include mobile {
                     float: none;
                     margin: 0px auto;
                     width: 100%;}
}

#aside {
        width: 20%;
 
         @include mobile {
                     margin: 0px auto;
                     width: 100%;} 
}







$desktop: 769px;
$tablet: 361px; /*just use this for reference of numbers*/
$tablet-max: 768px;
$mobile: 360px;


@mixin tablet {
    @media (min-width: #{$tablet}) and (max-width: 768px) {
        @content;}
}

@mixin mobile {
    @media (max-width: #{$mobile}) {
        @content;}
}


html {
	box-sizing: border-box;
    
    @include tablet {
        font-size: 13px;
    }
    
    @include mobile {
        font-size: 11px;
    }
}