There are multiple ways to handle CSS media queries. Here are a few options...

Queries everywhere

This isn't great as it adds a lot of repetitive code and, obviously if you want to change the breakpoint, you'll have to go through all your code.

.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

This is almost there as we have a reusable mixin, but we're adding @include break-point( all over the place when all I really care about is 'mobile' or '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%;
    }
}

Simpler Mixins

This is my preferred method. We only need a couple of mixins, so I don't think it's worth using variables for the widths, unless you plan to use the widths elsewhere in your 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%;
    }
}

Can we get any cleaner? Let me know...