BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Responsive Web Design (RWD)

Back to RWD Index

Mobile First using width

*see info on @media screen specificity here

    Mobile-first Design
  • Uses width and height Media Queries
  • Opposite of Desktop-First (max-width, max-height) approach
  • Best for new websites built from scratch
  • You prioritize mobile layouts and enhance for larger screens
  • Starting from scratch makes it easier to scale up the design
    Important Considerations
  • Prefer "min-width" in media queries for a mobile-first approach
  • Set a meta viewport tag for mobile-layout control
  • Thoroughly test on multiple devices to ensure media queries worked as intended

In the following example we set the background color, font color, and font size
based on the screen width. Change the screen width to see the changes.

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

    • The screen will now change the colors and font size, as described, based on screen.

      ** 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">

    Bodingles

    Back to Top