All geek questions in one place

How to determine the correct min-width and max-width values ​​for sensitive CSS?

I'm just now immersed in responsive CSS and design, and I wonder how I should calculate the different sizes of devices. I don’t want to spend all day testing every single mobile device, I just want to get a flexible layout to where it works.

I have seen several sites using @media only screen and (max-device-width: xx) , but it seems to limit it to specific resolutions, not the actual size of the browser window.

Any advice at all would be great. I'm not new to web development or CSS, but completely new to responsive design.

+4
source share
1 answer

It would seem that you are trying to figure out where and when to apply your breakpoints .

Instead of testing resolution on a bunch of devices, why not create a responsive design acceptable for everyone ? There are no magic breakpoints that set sensitive websites for each device, because each responsive website will differ depending on the layout, content, etc., as well as many different devices with different resolutions.

You might be thinking, “What the hell, I'm not going to go pixel by pixel and check my site,” but that's not exactly what I mean.

Finding breakpoints on your site:

  • Go to the browser, go to your website and open the console.
  • Resize the viewport to a very low resolution. 320px is a good starting point.
    ( Note. To get the size of the type of the window.innerWidth viewport in the console, see Resources for more options to improve your design debugging.)
  • Analyze your layout. How does he look at this permission? If you need to change the layout with this permission, then its time to add a breakpoint!
  • Slowly stretch the browser window until something breaks or looks terrible. At this point you will need to insert another breakpoint.
  • Repeat step 4 in your heart content.

Keep in mind:

Design Response Point Should Not Make Your Site Look Good on All Devices, Look Good Anywhere - Sam Richards

Resources:

+16
source

Source: https://habr.com/ru/post/1483637/

More articles:


All Articles