Какие варианты бывают мобильной верстки?

Question

[Сергей Васенин]

Возможно это будет 1000й вопрос про адаптивную верстку но всё же. На данный момент 2020 год и хотелось бы узнать какие методы создания мобильной или кросбраузерной вертски существуют. Хотелось бы каких нибудь ресурсов именно с практикой а не нудной теорией. про существование бутрепа слышал но есть какая то неприязнь к нему поэтому хотелось бы либо через медиа запросы научиться

Comments

[Ankhena]

Выражусь лаконично: https://jsfiddle.net/95Lkezbf/ - mobile first
Второй вариант в обратную сторону с max-width и значения по убыванию - desktop first.

Изменяйте ширину окошка с результатом.

С остальными свойствами точно также: переопределяете нужные их на необходимой ширине.

[Rustam Bainazarov]

[Сергей Васенин]

Ankhena, через медиа запросы?

[Ankhena]

Сергей Васенин,

через медиа запросы?

Это, вроде, ваше пожелание было:

поэтому хотелось бы либо через медиа запросы научиться

Я показала как.

Что-то решается и без media, просто флексом или гридами. Где-то без media не обойтись, всё зависит от макета.

[Сергей Васенин]

Ankhena, получается что для конкретного разрешения нужно менять блоки в медиа отступы и.т.д а для текста нужно указывать единицы измерения в em ?

[Ankhena]

Сергей Васенин,

получается что для конкретного разрешения нужно менять блоки в медиа отступы

Если они меняются, то да - менять.
Если они зависят, например, от ширины родителя в %, то оставить в %.
Если они вообще не меняются и всегда равны фиксированной величине в px, то так и оставить.

а для текста нужно указывать единицы измерения в em ?

Если текст дочернего блока зависит от размера шрифта родителя, то да, в em. Если не зависит, а зависит от чего-то другого, то в том и писать.

[Сергей Васенин]

Ankhena, это весь секрет мобильной верстки?

[Rustam Bainazarov]

Сергей Васенин, да. И прямые руки.

[Ankhena]

Сергей Васенин, да и секрета-то нет.
Геометрия, мозг, руки.

Смотрите в макет и делаете, потом проверяете во всех браузерах и на всех устройствах.

[Сергей Васенин]

Ankhena, может быть есть какая то статистика разрешений телефонов и всё в этом духе?

[Ankhena]

Сергей Васенин,

может быть есть какая то статистика разрешений телефонов и всё в этом духе?

да, конечно, есть

[Сергей Васенин]

Ankhena, и ещё такой вопрос как работать с поворотом экрана ?

[Ankhena]

Сергей Васенин, как хотите или как хочет дизайнер.
Выясните, что меняется, только ширина или ещё какие-то пропорции и т. д. И действуйте соответственно.

Дальше нужна конкретика, что именно вам не ясно и с чем конкретным проблемы.

[Сергей Васенин]

Ankhena, допустим экран телефона повернули. ширина станет больше а длина меньше какой атрибут отвечает за поведение страницы на поворот экрана ?

[Ankhena]

Сергей Васенин, orientation, но это не атрибут, а параметр условий в media.

И у экрана нет длины. Только ширина и высота.

[Сергей Васенин]

Ankhena, спасибо за ответы жаль не могу поставить это решением

Answer 1

[Арсений Матыцин]

бутрепа

В цитаты.

Ресурсы с практикой — ютуб. Но там, внезапно, сплошная нудная теория, только визуализированная.