02 css media queries and common breakpoints

Adding a CSS Reset to our web page layout. There are various resets in use; I prefer the Meyer Reset (currently 2.0). A reset zeros out most of the HTML block and inline-block elements. The advantage is now the web page should appear and or behave very similar across various browsers.

This series will also introduce and discuss CSS media queries and the more popular device breakpoints (circa 2020).

We will demonstrate a basic CSS media query by creating a simple mobile drop-down menu. The menu is triggered by a javascript function via an onClick event linked to a button element.

\\\\\\ CODE + WEB LINKS USED IN DEMO //////
EX 06 ARCHIVE ZIP ON ROGUE SERVER
http://design.sdsu.edu/webclasses/pri...

EX 06 ARCHIVE ZIP ON MAT SERVER
https://mat.miracosta.edu/MAT125_Prio...

\\\\\\ RESOURCES //////
Responsive breakpoints in 2020 – WordPress responsive design tutorial
https://howto-wordpress-tips.com/resp...

Media Queries Breakpoints For Responsive Design In 2020
http://devfacts.com/media-queries-bre...

CSS Tools: Reset CSS
https://meyerweb.com/eric/tools/css/r...

Responsive Web Design - The Viewport
https://www.w3schools.com/css/css_rwd...

CSS @media Rule
https://www.w3schools.com/cssref/css3...

CSS Media Queries
https://www.w3schools.com/css/css3_me...