I decided to add a “rubber layout” to my portfolio, I start doing it and I understand that there will be an adaptive right now. That is a couple of hours and is already adaptive. Question: Is the rubber time gone by? why do they use this type of layout now? (it’s possible to save, that is, rubber is needed for large screens / tablets (well, about the range: max-width: 1920px; min-width: 768px), and we don’t need mobile phones (because in fact, for mobile phones, its minimalistic design, etc.) and it’s more economical to make rubber?).

    3 answers 3

    I would use flexs. The most successful and correct approach, in my non-authoritative opinion. And rubber, and adapts. Example link

    .flex-block { display: flex; flex-flow: row wrap; } .one { background: #583C5A; padding: 20px; margin: 5px; } .half { flex: 45%; } .third { flex: 30%; } .four { flex: 20% } @media only screen and (max-width: 600px) { .third { flex: 1 100% } } @media only screen and (max-width: 480px) { .flex-block { flex-flow: column; } }

      Perhaps this is not exactly the answer to your question, however, for example, Yandex hinted that the mobile pages would be omitted from the issue. If your site does not provide an adaptive layout for tablets / mobile phones, it will be lower in the Yandeksovskoy issue, than sites with the same theme, but which provide such a layout.

      Quite a trend for the work of layout.

      Personally, my approach is this: if max-device-width / height exceeds the size of the tablet / mobile phone, then connect the rubber layout. If not, use adaptive for tablet / phone permissions.

      And of course it all depends on the task. If this is some kind of internal system with a bunch of elements and it is, by definition, more convenient to use in the browser on a widescreen display, then this one. And if the application is intended for the masses, who can go to a resource with anything, it is quite another

         / * Небольшие устройства (телефоны, меньше, чем 768px) * / / * То что по умолчанию в Bootstrap * / / * Небольшие устройства (таблетки, 768px и выше) * / media (min-width: 768px) {...} / * Средний устройства (настольные, 992px и выше) * / media (min-width: 992px) {...} / * Большие устройства (крупные настольные, 1200px и выше) * / media (min-width: 1200px) {...} ///// Это пример из bootstrap 3 в том случаи если верстать как mobile first//// ///// Или если desctop first ////// @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 992px) { ... } @media (min-width: 992px) and (max-width: 1200px) { ... } @media (min-width: 1200px) { ... }