Use of Media Queries in HTML

Use of Media Queries in HTML - This can function to set elements in HTML to appear on certain queries or screen widths so that the elements displayed can match the device used.

The use of media queries in HTML is useful for displaying elements that have a predetermined size so that elements can be displayed on each screen with an adjustable size.

One of them is for Adsense ads for AMP. Adsense provides the ad code for AMP as follows:

<amp-ad width="100vw" height=320
     type="adsense"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"
     data-auto-format="rspv"
     data-full-width>
  <div overflow></div>
</amp-ad>

If the code is directly applied to the blog, then when the blog is accessed with a desktop device, ads appear blank and display a large enough blank space and damage the layout of the blog.

That's because the code uses width = "100vw" so that the width will match the screen width (vw = view width).

That's because the Adsense ad code for AMP is provided for mobile devices so that the ads appear full on the width of the mobile screen, so it's not suitable for desktops.

So, so that AMP ads can also be displayed on the desktop, then we can use media queries in the amp-ad HTML code.

We can use 2 AMP ad codes with media queries, one ad is displayed for desktop width and another one is displayed for mobile width.

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='100' layout='fixed-height' media='(min-width: 737px)' type='adsense'>
</amp-ad>

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
  <div overflow=''/

The top code will appear on the screen with a minimum width of up to 737px. Then the code below will appear on the screen with a maximum width of 736px.

The code that appears on the screen with a minimum width of up to 737px uses a responsive size following a blog layout with a fixed height. But it can also be determined by the ad size, for example: 300x250 or 336x280.

This query media can also be used on other elements such as on amp-iframe, amp-addthis, and others.

This media can also use a minimum and maximum width combined so that it only appears at a certain width.

<amp-iframe src='.........' frameborder='0' height='340' layout='fixed-height' media='(max-width:1024px) and (min-width:801px)' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no'>
</amp-iframe>

the amp-iframe above will appear on the screen width of 1024px to 801px. If you are a Flexible AMP v4 Kompo user, you will find more than one amp-iframe code for more than one related post because it is adjusted to the display and width of the device.

The use of media query in HTML like this is more appropriate than using conditional tags because it does not depend on URL parameters but on the specified width.