<h2 id="declare-a-media-query-through-media">Declare a media query through <a href="https://www.w3.org/TR/CSS2/media.html" rel="nofollow noopener noreferrer" target="_blank">@media</a></h2>
<pre><code class="hljs language-css"><span class="hljs-keyword">@media</span> all <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">480px</span>) {...}
</code></pre>
<p>It's the most popular approach and it usually works fine.</p>
<p>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...</p>
<h2 id="include-it-into-an-html-page-as-a-link">Include it into an HTML page as a <a href="https://www.w3schools.com/tags/tag_link.asp" rel="nofollow noopener noreferrer" target="_blank">link</a></h2>
<pre><code class="hljs language-html">&#x3C;link rel="stylesheet" href="tablet.css" media="all and (min-width: 480px)" />
</code></pre>
<h2 id="embed-it-into-a-css-file-through-import">Embed it into a CSS file through <a href="https://www.w3.org/TR/css3-cascade/#at-import" rel="nofollow noopener noreferrer" target="_blank">@import</a></h2>
<pre><code class="hljs language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">"tablet.css"</span>) all <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">480px</span>);
</code></pre>
<p>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.</p>
<p>Good luck with your media queries!</p>

3 Simple Ways to Declare a Media Query

Declare a media query through @media

Include it into an HTML page as a link

Embed it into a CSS file through @import