Разрешение страницы на телефоне

194

21 декабря 2018, 17:00

'http://jsfiddle.net/96tomh1g/'

На телефоне мой сайт показывается вот так:

А я хочу что бы вот так:

Answer 1

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вставьте в head и дальше уже сможете адаптировать сайт под разные устройства с помощью @media запросов

Answer 2

Советую изучить Bootstrap

Вот документация по гриду - https://getbootstrap.com/docs/4.0/layout/grid/

Он вам еще пригодится и сэкономит много часов мутной работы.

Answer 3

Снова же я возвращаюсь к прошлому вопросу @media screen внутри которого, для каждого класса вы можете задать width:50vw;или сколько вам нужно, смотря на каком разрешении! В @media screen вы пишете код точно так же как для css.

Высоту я советую задавать параметром min-height:... так как статичная высота - не растянется от контента внутри! ```

/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Landscape phones and smaller */
@media (max-width: 480px) {
}