Good evening everyone, I need the help of experienced users, I have already read many articles about Adaptive design and even adapted the site for different devices, but only one problem. When I ask @media screen and (min-width: 1200px) and (max-width: 1366px) { ...}

The size of the site adapts to the resolution of 1366px (margin, padding and all that), but when checking for 1200px, it is displayed crookedly, can anyone explain how to implement an adaptive design with a range of permissions, so you have to adapt each a lot, and even when the browser zooms out in some sizes, the site looks crooked. Thank you for your attention, waiting for your advice.

  • Flexbox Read - Serge Esmanovich

1 answer 1

1 / The correct sequence of media queries.

From smaller to bigger (min-width: 768px -> 1200px -> 1366pxpx):

 @media (min-width: 768px) { ... } @media (min-width: 1200px) { ... } @media (min-width: 1366pxpx) { ... }

From larger to smaller (max-width: 1366pxpx -> 1200px -> 768px):

 @media (max-width: 1366px) { ... } @media (max-width: 1200px) { ... } @media (max-width: 768px) { ... }

Such a scheme helps me to remember.

2 / Adaptation of wrappers (.wrap, .container) and other blocks.

 .wrap { max-width: 1200px; width: 100%; }

or

 .container { width: 90%; }

3 / Adaptation of images and other media objects

 img { max-width: 100%; width: 100%; height: auto; }

4 / Location of blocks

Cancel float if necessary, use flex or other markup.

5 / Various other factors (extra padding, fixed block width, font, ...)

It is also recommended to use box-sizing (not entirely due to adaptation, just advice)

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

In simple words, the point is that the adaptive layout provides for the normal display of the site on various devices (tablets, phones). Those. possible resizing blocks, fonts. Change the location of the blocks.

PS: Everything is relative and generalized. For each case, you need to look at the problem.

TIP: On the Internet already a lot of lessons and examples of adaptive layout, look!

  • Thank you, very useful information, I will try as you say - hovdev
  • I will add. Bugs are possible when using combinations with adjacent values ​​for media. For example + media screen and (min-width: 100px) and (max-width: 200px) {...} + media screen and (min-width: 200px) and (max-width: 300px) {...}, better to replace with + media screen and (min-width: 100px) and (max-width: 199px) {...} + media screen and (min-width: 200px) and (max-width: 299px) {... } etc. otherwise, there will be surprises in that 1-pixel range. - silksofthesoul