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)
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 😜
That’s better! Hehe. ❤️❤️
You can find good free stock images here: unsplash.com/s/photos/rope-knot
I've learnt something new. Thanks for sharing
Great article
I was wondering if instead of:
if ( mediaQueryCondition.matches ) {
document.body.style.cssText =
background-color: red;
}
we could load a CSS file instead here...
Great and one stop post to see how MQs are used in all places of FrontEnd
Nice article