• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Свойства max-width для адаптивного дизайна (Использование max-width для мобильного сайта)
Свойства max-width для адаптивного дизайна
Kosten
Вторник, 06 Февраля 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Большинство разработчиков знают, что для того, чтобы структура сайта была отзывчивой и удобной для мобильных устройств, лучше определить ширины div и других элементов HTML, используя проценты, а не пиксели. Использование процентов для определения ширины позволяет изменять ширину элементов HTML при сохранении того же отношения к размеру его родительского контейнера, так как окно просмотра становится меньше, поэтому все элементы внутри него. Это очень полезно в гибком или мобильном дизайне.

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

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

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

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

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