 <p>According to the Chrome Network inspector, <strong>yes</strong>, the file will still be downloaded. </p> <p>Here's my test setup : </p> <pre><code>- index.php - css - main.css - light.css </code></pre> <p>My HTML : </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" href="css/main.css"&gt; &lt;link rel="stylesheet" href="css/light.css" media="screen and (min-width: 600px)"&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Hello world&lt;/h1&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><code>main.css</code> is empty and <code>light.css</code> contains this : </p> <pre><code>body{background-color: blue;} </code></pre> <p>Regardless of the window size, this is what the Network inspector shows : </p> <p><img src="https://i.gyazo.com/d95a51b0f6593bb76d9b5a5e7b0ef92e.png" alt=""></p> <p>The background is only blue when the page is over 600px.</p>