BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Responsive Web Design (RWD)

Back to RWD Index

Desktop First using width

*see info on @media screen specificity here

    Desktop-first Design
  • The opposite of Mobile-First (min-width, min-height) approach
  • Start design with desktop and adjust for smaller screens
  • Use "max-width" and "max-height" media queries
    • this sets the "upper boundaries" for the applied styles
    • It triggers styles when below the specified dimensions
    When to use
  • Desktop-first suits complex web apps who's primary users are desktop
  • Useful for converting desktop-centric sites to a responsive site
  • Requires fewer changes to the original design
    Important Rules
  • Have a "fallback" style for smaller devices without queries
  • Avoid excessive media queries for css manageability
  • Always test on multiple devices for proper rendering.

In the following example, we have set up different background colors based on the maximum screen width values. You can resize the screen width to see the effect. The code is the same for Mobile-First media queries, except we change min-width to max-width.

we accomplish this by adding "media queries" in the CSS
  • @media (max-width: xxxpx) {
  •      .header {
  •            header styles go here;
  •      }
  •      p {
  •            p styles go here;
  •      }
  • }

      • ** Note
    • all of the Styling Calls are nested within the @media function
    • the "META" tag must reside within the HTML head section
      • < meta name="viewport" content="width=device-width, initial-scale=1.0">

    Back to Top