Ширина экрана для адаптации

Question

Ширина экрана для адаптации

Саша Пивоваров Ученик (198), на голосовании 1 год назад

Всем привет! Занимаюсь вёрсткой. Вот пришло время к адаптации сайта. Но вопрос глупый, но для меня непонятный. В интернете пишут: для адаптации телефонов разрешение экрана нужно 320px, 480px и выше. Но не пойму адаптации мне две делать, например, для 320 и 480 или одну, например, только 480 и с другими устройствами также?

Answer 1

Это сам уже смотри, у нас на работе на мобилки адаптация под 320, 360/375, 480 и 768 и несколько десктопных

Answer 2

Адаптацию нужно делать от 320 до ширины вашего десктопного макета. На любом разрешении в этом промежутке сайт не должен разваливаться! А какие поинты для этого использовать зависит только от макета, причем для каждого отдельного блока они могут отличаться. Обычно как делают: начинаем уменьшать окно браузера и когда верстка разваливается, пора добавлять @media условие, и так до самого 320. Чтобы было легче и таких точек было меньше, на популярные разрешения можно добавить ограничивающий max-width контейнеру в px или rem, смотря что используете.

Answer 3

Делаешь несколько базовых шаблонов, между которыми переключаешься через @media.
Для каждого из разрешений делать адаптацию не нужно, за это отвечает адаптивная сетка flexbox или grid

Answer 4

держи заготовку
/* responsive */

@media (max-width: 1200px) {

}
/* //max-width: 1200px */

@media (max-width: 991px) {

}
/* //max-width: 991px */

@media (max-width: 800px) {

}
/* //max-width: 800px */

@media (max-width: 768px) {

}
/* //max-width: 768px */

@media(max-width: 640px) {

}
/* //max-width: 640px */

@media (max-width: 480px) {

}
/* //max-width: 480px */

@media (max-width: 375px) {

}
/* //max-width: 375px */