title: About responsive layout and display none some elements
body: <p>I'm working on a responsive layout for mobiles at the moment, with media queries that load the current css for each type of screen size. I'm doing <code>display:none;</code> for some elements that i don't want to show on mobile or desktop.</p>
  <p>My question is about the performance. I have many elements/divs that i need to rework on mobile screens that i think to display none the desktop elements and show the current.</p>
  <p>If i use this method, the browser will process <strong>all</strong> display:none elements? I can get a <strong>less performance</strong> if this happens?</p>
  <p><strong>If so, what's the better what to do that without impacting the performance?</strong></p>
  <p>Assuming a mobile first approach. Is it possible to load a section of content only if the screen is over a certain width?</p>
  <p>I understand how to show/hide content depending on screen size using CSS media queries. But what if you want to avoid unnecessarily loading content that will hidden on smaller screens.</p>
  <p>Any help much appreciated.</p>
  <p>Thanks in advance.</p>
  <p>-- EDIT:</p>
  <p>I'm trying to understand this method but without success:</p>
  <p>I have put this script inside the main html page:</p>
  <pre><code>&lt;script&gt;
      var url = screen.width &gt; 1024 ? '/api-test.php' : '/api-test2.php';
      fetch(url).then(response =&gt; document.querySelector(&quot;.containerAnime2&quot;).innerHTML = response);
  &lt;/script&gt;
  </code></pre>
  <p>And inside the &quot;api-test.php&quot; i put the div that i want to load:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;pt-br&quot;&gt;
      &lt;div class=&quot;containerAnime2&quot;&gt;
          &lt;div class=&quot;animeinfoLeft&quot;&gt;
              &lt;img src=&quot;/images/background_animes/&lt;?= $get_anime['url_nome']; ?&gt;.jpg&quot;/&gt;
          &lt;/div&gt;
          &lt;div class=&quot;animeinfoRight&quot;&gt;
              &lt;p&gt;&lt;?= $get_anime['nome']; ?&gt; Todos os Episódios Online&lt;/p&gt;
              &lt;div class=&quot;extra&quot;&gt;
                  &lt;span class=&quot;elementExtra&quot;&gt;&lt;img src=&quot;/images/star-icon.png&quot; style=&quot;width:16px; height:16px;vertical-align:-1px;&quot;/&gt; &lt;?= $get_anime['nota']; ?&gt;&lt;/span&gt;
                  &lt;span class=&quot;elementExtra&quot;&gt;&lt;img src=&quot;/images/iconDate.png&quot; style=&quot;width:16px; height:16px;vertical-align:-1px;&quot;/&gt; &lt;?= $get_anime['ano']; ?&gt;&lt;/span&gt;
                  &lt;span class=&quot;elementExtra&quot;&gt;&lt;?= $episodios_count['0']; ?&gt; Episódio&lt;?= (($episodios_count['0'] &gt; 1) ? 's' : ''); ?&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class=&quot;tags&quot;&gt;
                  &lt;?php foreach ($tags_array as $genero) {
                      echo '&lt;a href=&quot;/letras/'. $genero .'/&quot;&gt;&lt;span class=&quot;elementTag&quot;&gt;'. $genero .'&lt;/span&gt;&lt;/a&gt;';
                  } ?&gt;
              &lt;/div&gt;
              &lt;div class=&quot;description&quot;&gt;
                  &lt;p&gt;&lt;?= $get_anime['nome']; ?&gt; Todos os Episódios Online, Assistir &lt;?= $get_anime['nome']; ?&gt; Anime Completo, Assistir &lt;?= $get_anime['nome']; ?&gt; Online.&lt;br&gt;&lt;br&gt;&lt;?= $description; ?&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;a href=&quot;#&quot;&gt;
                  &lt;div class=&quot;errorButton&quot;&gt;
                      RELATAR ERRO OU EPISÓDIO NOVO
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>But it not worked yet.. i have made something wrong?</strong></p>
  <p>I got this error on chrome:
  <code>(index):129 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null</code></p>