Как работает отзывчивость сайта?

Я сделал мой сайт отзывчивым. Проверено на разных браузерах и мобильных телефонах. Работает нормально. Но проблема в том, что, когда я проверяю на последних мобильных телефонах с разрешением 720x1280 или выше в родном разрешении (размер экрана от 5 до 5,5 дюймов), мой веб-сайт не отображается с правой стороны, он скорее идет ниже содержимого. Вот код CSS:

 @media all and (min-width: 680px) {
.container {
 max-width: 1220px;
 text-align:left;
 background:#FFF;
 overflow:hidden;
 position:relative;
 box-shadow: 0px 2px 5px 0px #888888;
 margin: 0 auto;
 }
 section {
 float: left;
 width: 67.21311475%; 
 padding-left:1.63934426%;
 padding-right:1.63934426%;
 padding-top:15px;
 padding-bottom:15px;
 background:#FFF;
 position:relative;
 }
 aside {
 float: right;
 width: 26.22950819%;
 padding-left:1.63934426%;
 padding-right:1.63934426%;   
 padding-top:15px;
 padding-bottom:15px;
 background:#F9F9F9;
 position:relative;
 }
 }

Я хочу, чтобы в стороне было 320 пикселей. Так, в процентах 320/1220=27,27272727%. Если я размещу объявления шириной 160px, то объявление будет правильно отображаться, пока минимальный размер экрана (заполнение 160+20px)/680=26.47058823% (я надеюсь, что пока я прав). Но это не работает. Я проверил на iPhone 6S, Samsung E5, и Aside не отображается ни в портретном, ни в ландшафтном режиме. В стороне идет как блок под всем остальным и над разделом нижнего колонтитула. Я понимаю, что все дело в отзывчивости, но что я не понимаю, так это: разрешение E5 составляет 720x1280, тогда как разрешение iPhone 6s составляет 750x1334. Итак, почему мой медиа-запрос не работает, чтобы приспособиться к этому месту?

Отзывчивый веб-дизайн о разрешении экрана или размере экрана целевых устройств? Или речь идет о размещении одного блока за другим независимо от разрешения устройства? Пожалуйста, помогите мне понять.

1 ответ

Решение

Из W3Schools

Он называется адаптивным веб-дизайном, когда вы используете CSS и HTML для изменения размера, скрытия, сжатия, увеличения или перемещения содержимого, чтобы оно выглядело хорошо на любом экране.

Проблема в том, что пиксель CSS не обязательно соответствует физическому пикселю на экране, например, имеет 1334x750 пикселей, но только 667x375 для CSS. Последний является тем, который учитывает CSS, что может привести к ошибке, с которой вы сталкиваетесь, так как для вычисления используется неправильное количество пикселей.

Ищите пиксели CSS вместо обычных пикселей вместо этого. Разрешение экрана имеет значение, но не абсолютное количество пикселей для адаптивной веб-разработки. Надеюсь это поможет:)

Другие вопросы по тегам