| Kosten | Суббота, 24 Февраля 2018, 11:40 | Сообщение 1 |
| В этом мануале разберем как можно сделать ответную площадь или адаптивный квадрат, где внутри будет контент, и все с помощью CSS. Все очень просто, так как недавно столкнулся с такой ситуацией, а точнее с проблемой CSS. Мне нужно было создать квадратный элемент, который сохранил бы свою квадратную форму, поскольку он реагировал на изменение размера окна. Что думаю многим пригодится при адаптирование на сайте элементов. Здесь все очень просто, мы создаем квадрат или блок, чтоб в нем было описание, но главное, чтоб на всех мобильных носителях показывало корректно.
Здесь нужно изначально понимать, что ширина элемента вычисляется как процент от его родительской ширины, а его высота вычисляется как процент от высоты его родителя. Поскольку наша ширина и высота вычисляются из разных измерений, квадрат больше не будет сохранять свою форму.
Основным концептуальным и буквальным строительным блоком наиболее отзывчивых форм CSS является прямоугольник. С точки зрения геометрии прямоугольник является параллелограммом, где каждый угол является прямым углом. Это означает, что как только вы узнаете как сделать отзывчивый прямоугольник CSS, вы автоматически узнаете, как сделать отзывчивый квадрат CSS.
Давайте перейдем к созданию, так как оказалось это не сложно.
Это будет по умолчанию:
Здесь видим его сжатым, но описание внутри осталось на мести и не вылазит за рамки.
HTML
Код <div class='zornet_ru_kerdsa'> <div class='adaptberskin'><div><span>ZorNet: Создание сайта на uCoz</span></div></div> </div>
CSS
Код .zornet_ru_kerdsa {
position: relative;
width: 50%;
overflow: hidden;
background: #2e5fa0;
}
.zornet_ru_kerdsa:before{
content: "";
display: block;
padding-top: 100%;
}
.adaptberskin {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #f3efef;
}
.adaptberskin div {
display: table;
width: 100%;
height: 100%;
}
.adaptberskin span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fbf7f7;
font-size: 17px;
font-weight: bold;
}
Если бы вы изменили ширину и высоту в CSS для этого прямоугольника с фиксированным размером в процентах, ваш код не работал бы и ничего не отображалось бы. Причина, по которой это не будет работать, состоит в том, что процентная высота всегда вычисляется на основе высоты элемента, и в этом случае высота элемента всегда будет равна нулю.
Демонстрация:
| | Страна: (RU) |
| |
