CSS Media Query

【CSS Media Query】

　　CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.

　　The basic syntax looks like this:

　　

// normal style
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// show a larger image when you're on a big screen
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// remove header image when printing.
@media print {
    #header-image {
        display: none;
    }
}

　　But can also be called like this:

　　

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

　　The advantage of this method is that only the valid CSS is downloaded; so no print.css is only downloaded when printing (or using print preview).

　　This example shows the 2 blocks on big screens next to each other, while on small screens they will be displayed below each other.

　　

#block1, #block2 {
    float: left;
    width: 100%;
}

@media (min-width: 1000px) {
    #block1, #block2 {
        width: 50%;
    }
}

参考：http://cssmediaqueries.com/what-are-css-media-queries.html