Use of Media Queries in HTML - This can function to set
elements in HTML so that they 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 by 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 width of the screen (unit vw = view width).
That's because the Adsense ad code for AMP is indeed
provided for mobile devices so that the ads appear full on the width of the
mobile screen, so it's not suitable for desktops.
Now, 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=''/>
</amp-ad>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 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. 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.
Maybe Usefull….