Страница 1 из 11
Общий форум » Все для вебмастера » Начинающий Вебмастер » Свойства max-width для адаптивного дизайна (Использование max-width для мобильного сайта)
Свойства max-width для адаптивного дизайна
Kosten
Дата: Вторник, 06.02.2018, 06:03 | Сообщение 1
Администраторы
Сообщений:16331
Награды: 53


Большинство разработчиков знают, что для того, чтобы структура сайта была отзывчивой и удобной для мобильных устройств, лучше определить ширины div и других элементов HTML, используя проценты, а не пиксели. Использование процентов для определения ширины позволяет изменять ширину элементов HTML при сохранении того же отношения к размеру его родительского контейнера, так как окно просмотра становится меньше, поэтому все элементы внутри него. Это очень полезно в гибком или мобильном дизайне.

Иногда использование процентов вместо пикселей для определения ширины элементов HTML может иметь несколько менее идеальных побочных эффектов. Например, давайте останемся у вас div, ширина которого определена как 80%. Если пользователь просматривает этот div на телефоне или ноутбуке, отображение div на 80% может выглядеть идеально пропорциональным. Однако, если пользователь просматривает один и тот же div на рабочем столе с большим монитором, div с шириной 80% может выглядеть огромным, и его размеры, вероятно, превысят размер, на котором он должен отображаться в исходном дизайне.

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

Вот пример того, как он должен выглядеть:

Код
div{
width: 80%;
max-width: 1000px;
}

Используйте этот трюк, и вам никогда не придется беспокоиться о том, что элементы отображаются слишком сильно на большом мониторе.
Страна: (RU)
Общий форум » Все для вебмастера » Начинающий Вебмастер » Свойства max-width для адаптивного дизайна (Использование max-width для мобильного сайта)
Страница 1 из 11
Поиск: