Search code examples
htmlcssmedia-queries

Media queries. Which would be the standard?


Supposing we want to build a website with 4 different sizes. Which would be the standard procedure? Starting designing one size and modify the other 3 css attributes with media queries, or not putting any value in this attributes in the main size an creating 4 media-queries with these exclusives attributes? Thank you!


Solution

  • The current "best practice" is to make the mobile (lightest-weight) version the standard CSS without media queries, and add progressively heaver, more desktop-friendly CSS using media queries. This is called mobile-first responsive design.

    The thinking here is to get the low-end mobile processors to do as little work as possible to ingest their CSS, and let the big desktops worry about the complicated rule hierarchy and the heavy images that come with larger sizes. But, this is just rule-of-thumb, it will work even if you do it the other way around.