@media query question(screen resou)

is there any universal media query screen resolution? If there is can you perhaps give the code for it… If there is none, then how do we decide which screen resolution we are going to use.

A search with your favorite search engine will turn up results for your question.

A better method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.
It is almost always easier to start narrow and work your way wider. Your CSS will be simpler and easier to understand. For wider views you may find that you need to add extra wrapper <div>s and such to help with styling. That is perfectly fine. But always remember to go back and check your narrow view to make sure you didn’t break anything and adjust the base CSS as needed. For simple layouts like this you will find that you will actually need very little CSS for your wider view break point.

1 Like

To expand a little on that already detailed answer - you don’t need tons of media queries. Smartphones start at 320px width, most are even wider (starting at 360px). There’s no point in optimising your page for a width of 200px.

Smartphones go roughly up to 480px (last time I checked). Then comes a region that’s neglectible for the most part, I’m not aware of many devices with a width between 480px and 768px. Again, no point in optimising in that region, just make sure the layout doesn’t completely break.

A typical starting point for tablets is 768px, and tablets go roughly up to 1000px (I’d go for 1200px to be on the safe side).

From 1200px upwards, design your desktop view.

A typical CSS would look like this:

/* mobile styles */
/* page should look good between 320 and 480px */
/* page should still look acceptable between 480 and 768 px */


@media (min-width:768px) {
  // tablet styles
}

@media (min-width:1200px) {
  // desktop styles
}

@media (min-width:1800px) {
  // optional: CSS for super-wide screens
}

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.