InternetingIsHard Part 5 – Responsive Design – CSS

Part 5 of what I have learned from internetting is hard.

We can use media queries to differentiate the CSS for responsive design.

• @media specifies that it’s a media query.
• only screen “media type” to apply to devices with screens (opposed to printed documents, like when you hit Cmd+P in a browser).
• min-width and max-width parts are called “media features”, and they specify the device dimensions you’re targeting.
• others can be found here

Relevant: web design patterns for responsive layouts

1. Mobile-first: Desktop layouts are typically more complex than their mobile counterparts, and this “mobile-first” approach maximizes the amount of CSS that you can reuse across your layouts.
2. Use flex: wrap (which populates the overflow with a break) to make it easier to design for tablet and desktop.
   For eg: for tablets, adjust the flex item width to be 50% and it will be a double column layout.
3. use
   width: 960px;

   margin: 0 auto;

   to limit the width for desktops, and

   order: 1; (or any other number, relative to 0) to change the ordering
   
4. IMPORTANT: default has viewport zoom enabled, add this to HTML head:

   <meta name='viewport'
         content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

5. To test, on Chrome’s dev tools, click on toggle device icon.