Example If the viewport is less than, or equal to, 700 pixels wide, change the background color to yellow. If it is greater than 700, change it to pink
function myFunction(x) { if (x.matches) { // If media query matches document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } var x = window.matchMedia("(min-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction) // Attach listener function on state changes
COLOR PICKER
Try it Yourself »
Using Media Queries With JavaScript HOW TO
Media queries was introduced in CSS3, and is one of the key ingredients for responsive web design. Media queries are used to determine the width and height of a viewport to make web pages look good on all devices (desktops, laptops, tablets, phones, etc). The window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like minheight, min-width, orientation, etc. Learn more about media queries in our CSS Media Queries Tutorial Learn more about responsive design in our Responsive Web Design Tutorial Learn more about the window.matchMedia() method in our JavaScript Reference.
Next ❯
❮ Previous
Tabs Dropdowns Accordions Convert Weights Animated Buttons Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List
SHARE
CERTIFICATES HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML. Read More »
REPORT ERROR
PRINT PAGE
FORUM
ABOUT
Top 10 Tutorials
Top 10 References
Top 10 Examples
Web Certificates
HTML Tutorial CSS Tutorial JavaScript Tutorial W3.CSS Tutorial Bootstrap Tutorial SQL Tutorial PHP Tutorial jQuery Tutorial Angular Tutorial How To Tutorial
HTML Reference CSS Reference JavaScript Reference W3.CSS Reference Bootstrap Reference SQL Reference PHP Reference HTML Colors jQuery Reference AngularJS Reference
HTML Examples CSS Examples JavaScript Examples W3.CSS Examples Bootstrap Examples HTML DOM Examples PHP Examples jQuery Examples Angular Examples XML Examples
HTML Certificate CSS Certificate JavaScript Certificate jQuery Certificate PHP Certificate Bootstrap Certificate XML Certificate
Responsive Tables Comparison Table
More Fullscreen Video Modal Boxes Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Profile Card Alerts Notes Labels Circles Coupon Responsive Text Fixed Footer Equal Height Clearfix Snackbar Scroll Drawing Sticky Header Pricing Table Parallax Aspect Ratio Toggle Like/Dislike Toggle Hide/Show Toggle Text Toggle Class Add Class Remove Class Active Class Zoom Hover Arrows Shapes Browser Window Custom Scrollbar Device Look Placeholder Color Vertical Line Animate Icons Countdown Timer Typewriter Coming Soon Page Chat Messages Split Screen Testimonials Quotes Slideshow Closable List Items Typical Device Breakpoints Draggable HTML Element Trigger Button on Enter JS Media Queries Syntax Highlighter JS Animations Get Iframe Elements
Website Make a Website Make a Website (W3.CSS) Make a Website (BS3) Make a Website (BS4) Center Website Contact Section
Grid 2 Column Layout 3 Column Layout 4 Column Layout Expanding Grid List Grid View Mixed Column Layout Blog Layout
Google Google Maps Google Maps BW Google Translate Google Charts Google Fonts
Converters Convert Weight Convert Temperature Convert Length Convert Speed
How To Use Media Queries in JavaScript - W3Schools
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML
CSS
JAVASCRIPT
SQL
PHP
BOOTSTRAP
MORE
REFERENCES
EXAMPLES
How TO - Media Queries with JavaScr...
