Komponen web dengan html yang berbeza untuk desktop dan mudah alih

Christian Schaefer mempunyai penulisan besar yang besar tentang berurusan dengan iklan web. Seluruhnya menarik, pertama mendokumentasikan semua cabaran yang ada pada iklan, dan kemudian menyampaikan penyelesaian moden kepada masing -masing.

Satu coretan kod yang menarik perhatian saya adalah cara mudah untuk merancang komponen yang menjadikan HTML yang berbeza bergantung pada saiz skrin.

 <dana>
  <pemat>
    // kod html iklan mudah alih dengan skrip sebaris
  
  <pemat>
    // kod html iklan desktop dengan skrip sebaris
  
  <script>
    const isMobile = MatchMedia (&#39;(max-device-width: 20EM)&#39;). Perlawanan;
    const ad = document.currentscript.closest (&#39;. ad&#39;);
    kandungan const = iklan
      .QuerySelector (isMobile? &#39;.ad__mobile&#39;: &#39;.ad__desktop&#39;)
      .content;
    
    ad.appendchild (document.importNode (kandungan, benar));
  </script>
</pemat></pemat></dana>

Pandai. Walaupun perhatikan bahawa Kristian akhirnya pergi ke laluan yang sama sekali berbeza dalam artikel itu.

Inilah kod yang sama di mana saya menggunakan elemen tersuai dan gerakkan JavaScript ke JavaScript hanya 'cuz.

Atas ialah kandungan terperinci Komponen web dengan html yang berbeza untuk desktop dan mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!