DEV Community

Cover image for How to use Media Queries in HTML, CSS and JavaScript
Linda
Linda

Posted on • Updated on

How to use Media Queries in HTML, CSS and JavaScript

This was originally posted at lindaojo.com

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

  1. width and height of the viewport
  2. width and height of the device
  3. orientation (is the tablet/phone in landscape or portrait mode?) resolution
  4. 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>

Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 )' )
Enter fullscreen mode Exit fullscreen mode
if ( mediaQueryCondition.matches ) {
    document.body.style.cssText = `
        background-color: red;
    `
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
grahamthedev profile image
GrahamTheDev

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 😜

Collapse
 
grahamthedev profile image
GrahamTheDev

That’s better! Hehe. ❤️❤️

Collapse
 
pankajpatel profile image
Pankaj Patel

You can find good free stock images here: unsplash.com/s/photos/rope-knot

Collapse
 
favouritejome profile image
Favourite Jome

I've learnt something new. Thanks for sharing

Collapse
 
leonardoschmittk profile image
Leonardo Schmitt

Great article

Collapse
 
rconr007 profile image
rconr007

I was wondering if instead of:
if ( mediaQueryCondition.matches ) {
document.body.style.cssText =
background-color: red;

}

we could load a CSS file instead here...

Collapse
 
pankajpatel profile image
Pankaj Patel

Great and one stop post to see how MQs are used in all places of FrontEnd

Collapse
 
leoloopy profile image
Leo

Nice article