адаптивный дизайн
Всем привет! Есть код, выводящий на фоте 6 div'ов, которые имеют форму круга:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .header_image { width: 100%; margin-left: -8px; z-index: 1; overflow: hidden; } .header_image:hover > div { transform: scale(1.1); } .header_image > img { width: 100%; transition: 0.5s; } .header_image > img:hover { transform: scale(1.1); } .header_image > div { position: absolute; text-align: center; vertical-align: middle; transition: 0.5s; } .link1 { right: 15%; top: 100px; background: linear-gradient(to right bottom, white, grey); width: 200px; height: 200px; border-radius: 100px; } .link2 { right: 40%; top: 300px; background: linear-gradient(to right bottom, yellow, red); width: 300px; height: 300px; border-radius: 150px; } .link3 { left: 10%; top: 250px; background: linear-gradient(to right bottom, lime, green); width: 230px; height: 230px; border-radius: 115px; } .link4 { right: 30%; top: 600px; background: linear-gradient(to right bottom, rgb(108, 160, 255), rgb(0, 0, 102)); width: 150px; height: 150px; border-radius: 75px; } .link5 { left: 25%; top: 700px; background: linear-gradient(to right bottom, yellow, green); width: 200px; height: 200px; border-radius: 175px; } .header_image > div > a { line-height: 10px; display: inline-block; position: relative; top: calc( 50% - 40px ); line-height: 30px; text-decoration: none; } .l1 { background: linear-gradient(to right bottom, rgb(166, 197, 255), rgb(0, 0, 78)); background-clip: text; color: transparent; } .l2 { background: linear-gradient(to right bottom, white, #222222); background-clip: text; color: transparent; } .l3 { background: linear-gradient(to right bottom, yellow, red); background-clip: text; color: transparent; } .l4 { background: linear-gradient(to right bottom, lime, green); background-clip: text; color: transparent; } .l5 { background: linear-gradient(to right bottom, firebrick, black); background-clip: text; color: transparent; } </style> </head> <body> <div class="header_image"> <img src="https://www.zastavki.com/pictures/1920x1200/2012/Cities__034084_.jpg"> <div class="link1"><a href="#" class="l1">Какой-то тектс 1</a></div> <div class="link2"><a href="#" class="l2">Какой-то текст 2</a></div> <div class="link3"><a href="#" class="l3">Какой-то текст 3</a></div> <div class="link4"><a href="#" class="l4">Какой-то текст 4</a></div> <div class="link5"><a href="#" class="l5">Какой-то текст 5</a></div> </div> </body> </html> В чём заключается вопрос: я хочу сделать так, чтобы width и height были равны (но не по процентам, а по какому-то фиксированному значению, например 200px), но чтобы при сужении экрана не происходила дичь И при этом пропорционально изменялись правила высоты и ширины. |
Попробуйте вместо % и px использовать vw.
1vw = 1% ширины области просмотра Ну как то так .link1 { right: 15vw; top: 10vw; background: linear-gradient(to right bottom, white, grey); width: 20vw; height: 20vw; border-radius: 10vw; } (числа условны, попробуйте подобрать для основного размера) Может быть и высоту шрифта тоже придется подбирать. |
voraa,
спасибо, разобрался :). Но ещё есть вопросик: как текст div class="link1" ... div class="link5" тоже уменьшить пропорционально уменьшению экрана? Пробовал font-size (vw, em), но не успешно. Через те же 100% не работает |
Цитата:
|
Поставь такой еще класс
:root { font-size: 1.25vw; } Я попробовал на таком примере .link1 { right: 15vw; top: 10vw; background: linear-gradient(to right bottom, white, grey); width: 10vw; height: 10vw; border-radius: 5vw; } .header_image > div > a { line-height: 1.5vw; display: inline-block; position: relative; top: calc( 50% - 1vw ); text-decoration: none; } .l1 { background: linear-gradient(to right bottom, rgb(166, 197, 255), rgb(0, 0, 78)); background-clip: text; color: black; font-size: 1rem; } Вроде получается |
Часовой пояс GMT +3, время: 01:09. |