데스크탑 및 모바일 용 HTML이 다른 웹 구성 요소

Christian Schaefer는 웹 광고를 다루는 것에 대해 큰 글을 쓰고 있습니다. 모든 것이 흥미롭고, 먼저 광고가 제시하는 모든 과제를 문서화 한 다음 각각의 현대 솔루션을 제시합니다.

내 눈을 사로 잡은 하나의 코드 스 니펫은 화면 크기에 따라 다른 HTML을 렌더링하는 구성 요소를 설계하는 간단한 방법이었습니다.

 <div>
  <emplate>
    // 인라인 스크립트가있는 모바일 AD HTML 코드
  템플릿>
  <emplate>
    // 인라인 스크립트가있는 데스크탑 AD HTML 코드
  템플릿>
  <cript>
    const ismobile = matchmedia ( '(max-device-width : 20em)'. 매치;
    const ad = document.currentscript.closest ( '. ad');
    const content = ad
      .QuerySelector (ismobile? '.ad__mobile': '.ad__desktop')
      .콘텐츠;
    
    ad.appendChild (document.importnode (content, true));
  스크립트>
</cript></emplate></emplate>
</div>

영리한. 비록 기독교인은이 기사에서 완전히 다른 길을 가고 있음에 주목합니다.

다음은 사용자 정의 요소를 사용하고 JavaScript를 JavaScript로 옮기는 동일한 코드입니다.

위 내용은 데스크탑 및 모바일 용 HTML이 다른 웹 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!