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

Важно определить максимальную и минимальную ширину, потому что тогда, независимо от того, насколько крупным или малым может быть область просмотра, ваши HTML элементы не смогут пройти через их определенные минимальные и максимальные ширины. Например, если вы хотите, чтобы ширина div была равна 85%, на гигантском настольном мониторе 85%, что идет или может быть большим по ширине. Может быть, вы действительно хотите, чтобы ширина вашего div составляла 85%, если это не превышает около 1000 пикселей. Именно тогда вы определяете максимальную ширину.



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

Это та же концепция с минимальной шириной:

Код
div{
width: 30%;
min-width: 100px;
}

В css min-width минимальная ширина элемента, где css, который вы определили, применяется к наименьшей ширине вашего экрана, чтобы вы определили. Но если вы пойдете ниже минимальной ширины, которую вы определили, то css не изменится. В то время как максимальная ширина - это максимальная ширина, указанная для элемента, для которого вы хотите, чтобы css работал до его максимального размера.
Прикрепления: 3001684.png (49.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Использование свойство Min-Width и Max-Width в CSS (Адаптивный веб-дизайн с применением min-width, max-width)
  • Страница 1 из 1
  • 1
Поиск: