Опыта в оптимизации элементов под ширину экрана у меня нет. Хочу сделать резиновый прямоугольник и слова слева\права, которые тянулись бы при изменении определенных разрешений ширины экрана: 1920 - 1366 - 360 (или хотя-бы 1280 - 1366 - 1920, ибо при 360 я так полагаю нужно писать сайт для мобильной версии, а так пусть открывает полную версию (?) ). Вернусь к сути проблемы: Я попробовал сделать своеобразную резинку посредством @media в css, но слово слева\справа даже при изменении width в 100px (здесь я оставил как было до, с 100px я просто проверял) - соответственно уезжает под прямоугольник.
a{
text-decoration: none;
font-family: arial;
color: black;
}
.image {
display: block;
text-align: center;
line-height: 200px;
position:absolute;
font-size:40px;
}
@media screen and (min-width:1366px) and (max-width:1920px) {
.next { display:block; height: 23px; width: 40px; position: relative;
left:1170px; top:425px; }
.prev { display:block; height: 23px; width: 40px; position: relative;
left:570px; top:400px; }
.slider { position: relative; margin-left:650px; margin-top:300px;}
.image { display: block; line-height: 133px; font-size: 40px; }
<div class="next"><a href="#">next</a></div>
<div class="prev"><a href="#">previous</a></div>
<div class = "slider">
<div class="image first">FIRST</div>
<div class="image">SECOND</div>
<div class="image">THIRD</div>
<div class="image">FOURTH</div>
<div class="image last">FIFTH</div>
</div>
Если с помощью @media - то как адаптировать эти 3 контейнера, чтобы при изменении экрана они тянулись с малой погрешностью в своих размерах и отступах относительно друг друга? и Есть ли какие-то другие способы сделать данные объекты тянущимися, желательно прямо пропорционально изменению экрана? (jQuery, к примеру; решение в коде JS, пожалуйста, не предлагать, я его не пойму). Текст я помнится подстраивал под изменения с помощью font-size: 1.3vw , но как подстроить контейнер... Буду признателен Вам за помощь\советы в решении.