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