How to use Media Queries in HTML, CSS and JavaScript

#beginners #html #css #javascript

This was originally posted at lindaojo.com

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?) resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.

Media Queries in HTML

We can use media queries to determine what <link> to use in the <head> of an HTML file as shown below.

<html>
  <head>
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Use for screens that have a width of at least 50rem -->
    <link rel="stylesheet" href="small.css" media="(min-width: 50rem)" />
    <!-- Use for screens that have a width of at least 80rem -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 80rem)" />
</html>

We can use media queries on the <style> element too.

<style media="all and (min-width: 800px)">
  h1 {
    font-size: 2rem;
    color: green;
  }
</style>

Media queries can also be placed within the <picture> element. How? By specifying them on the <source> element which lets us pass multiply image options.

<picture>
  <!-- Use image in landscape mode -->
  <source srcset="alligator.png" media="(orientation: landscape)">
  <!-- Use image in portrait mode -->
  <source srcset="girrafe.png" media="(orientation: portrait)">
</picture>

Media Queries in CSS

This is the most common environment for writing media queries.

The @media rule is used in media queries to apply different styles for different media types/devices.

@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
  .container {
    display: hidden;
  }
}

Media Queries in JavaScript

You can add media queries to your JavaScript by using the window.matchMedia() method.

For instance, if we want to change the background color of the <body> to red when the screen width exceeds 600px, we can do that by first creating a constant using "window.matchMedia()" as shown below.

// Create a media condition that targets viewports at least 768px wide
const mediaQueryCondition = window.matchMedia( '( min-width: 600px )' )

if ( mediaQueryCondition.matches ) {
    document.body.style.cssText = `
        background-color: red;
    `
}

That's it folks! You can now add media queries anywhere you want in the whole wild world.

See you next week!

Top comments (8)

GrahamTheDev • Mar 23 '21

Just a quick suggestion, don’t use an image with a watermark over it, it makes people think you just copied an image randomly from adobe stock without paying for it, which of course is illegal and you wouldn’t do 😜