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: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT
✅ 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/docs/Web/API/Window/innerWidth
window.innerHeight: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
element.clientWidth: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
element.clientHeight: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
✅ Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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