5 CSS трика за отзивчиви оформления
Достатъчно лесно е да направите отзивчив шаблон на уебсайт, но поддържането на елементите в баланс във всички точки на промяната на шаблона е истинско изкуство. Този урок представя 5 техники, които да се използват в CSS за адаптивно оформление. Има много прости CSS свойства като минимална ширина, максимална ширина, препълване и относителни стойности, но всички те играят важна роля в отзивчивите дизайни.
2. Минимална и максимална ширина
Свойството max-width ви позволява да зададете максималната ширина на елемент. Трябва да се използва, за да се предотврати разширяването на елемента извън определен обхват.
Контейнер със свойство max-width
Примерът по-долу определя размера на контейнера от 800px, но задава ограничение за размер на границата от 90%.
Отзивчиво изображение
Възможно е изображението да се преоразмерява автоматично до максималния си размер, като се използват свойствата max-width: 100% и height: auto .
Горният код за отзивчиво изображение работи в IE7 и IE9, но не работи в IE8. За да коригирате ситуацията, добавете свойството width: auto. Можете да използвате условно CSS правило специално за IE8 или следния трик за IE:
Свойство с минимална ширина
Свойството min-width е противоположно на свойството max-width. Той задава минималната възможна ширина на елемента. По-долу е даден пример за използване на свойството min-width, за да се предотврати твърде малкото поле за въвеждане при намаляване.
3. Относителни стойности
В адаптивното оформление използването на относителни стойности може значително да опрости вашия CSS код и да подобри външния вид на вашия дизайн.