3 Simple Ways to Declare Media Query

Konstantin KomelinKonstantin Komelin

Declare media query through @media

@media all and (min-width: 480px) {...}

It's the most popular approach and it usually works fine.

But sometimes it's necessary to split big CSS file and extract CSS rules for phone, tablet and desktop into separate files. In such case the following ways are reasonable...

<link rel="stylesheet" href="tablet.css" media="all and (min-width: 480px)" />

Embed into CSS file through @import

@import url("tablet.css") all and (min-width: 480px);

Please note that if you increase quantity of included files you'll increase quantity of requests to the server and server load accordingly. So use this possibility wisely.

Good luck with your media queries!