JavaScript Media Queries | Responsive Web Design
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
JavaScript Media Queries are sometimes necessary for Responsive Web Design instead of just using CSS media queries. We'll look at some useful examples of when and how to use a JavaScript Media Query for Responsive Web Design. With JS, you can get the viewport width and height or the specific width and height of an element in a web page.
Subscribe ➜ https://bit.ly/3nGHmNn
▶ Just learning JavaScript? Check out my JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials for Beginners
✅ Quick Concepts outline:
JavaScript Media Queries
• Why use a JavaScript Media Query for Responsive Web Design?
• Example 1: Using window.innerWidth
• Example 2: Using window.innerWidth and window.innerHeight
• Example 3: Using the console to get the values
• What about element width and height?
• Example 4: Using clientWidth and clientHeight
• Wrap-up and reminder
🤖 API used in the examples for this tutorial:
• https://openweathermap.org/api
📚 Further Reading:
MDN Web Docs:
window.innerWidth: https://developer.mozilla.org/en-US/d...
window.innerHeight: https://developer.mozilla.org/en-US/d...
element.clientWidth: https://developer.mozilla.org/en-US/d...
element.clientHeight: https://developer.mozilla.org/en-US/d...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: https://yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to use JavaScript Media Queries for Responsive Web Design helpful? If so, please share. Let me know your thoughts in the comments.
#javascript #media #queries
On this page of the site you can watch the video online JavaScript Media Queries | Responsive Web Design with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 07 December 2020, share the link with friends and acquaintances, this video has already been watched 10,121 times on youtube and it was liked by 224 viewers. Enjoy your viewing!
