Existem várias maneiras de lidar com consultas de mídia CSS. Aqui estão algumas opções…

Consultas em todos os lugares

Isso não é muito bom, pois adiciona muito código repetitivo e, obviamente, se você quiser alterar o ponto de interrupção, terá que examinar todo o seu código.

.mydiv{
    max-width: 920px;
    @media only screen and (max-width: 768px) {
        max-width: 80%;
    }
    @media only screen and (max-width: 480px) {
        max-width: 100%;
    }
}

Mixins

Isso está quase lá, pois temos um mixin reutilizável, mas estamos adicionando em @include break-point(todos os lugares quando tudo que realmente importa é ‘celular’ ou ‘tablet’.

$tablet: 768px;
$mobile: 480px;
@mixin break-point($w) {
    @media only screen and (max-width: $w) { @content; }
}
.mydiv{
    max-width: 920px;
    @include break-point($tablet){
        max-width: 80%;
    }
    @include break-point($mobile){
        max-width: 100%;
    }
}

Mixins mais simples

Este é o meu método preferido. Precisamos apenas de alguns mixins, então não acho que vale a pena usar variáveis ​​para as larguras, a menos que você planeje usar as larguras em outro lugar em seu CSS.

@mixin mobile() {
    @media only screen and (max-width: 480px) { @content; }
}

@mixin tablet() {
    @media only screen and (max-width: 768px) { @content; }
}

.mydiv{
    max-width: 920px;
    @include tablet(){
        max-width: 80%;
    }
    @include mobile(){
        max-width: 100%;
    }
}

Podemos obter mais limpador? Avise-se me…