Как сделать, чтобы размер блока при разных разрешениях не изменялся?

Question

[thesirvlad]

Как сделать, чтобы размер блока при разных разрешениях не изменялся?
Имею такой код:

.arrow-down {
    margin: 30px;
    position: relative;
    bottom: 95px;
    display: flex;
    justify-content: center;
    height: 0px;

}
.arrow-down span {
    display: block;
    width: 25px;
    height: 25px;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    transform: rotate(45deg);
    margin: -16px;
    animation: arrow-down 2s infinite;
}
.arrow-down span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow-down span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes arrow-down {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

<div class="arrow-down">
 			<a href="">
		    <span></span>
		    <span></span>
		    <span></span>
			</a>
       </div>

При уменьшении или увеличении экрана, уменьшается и увеличивается стрелка соответсвенно. Как сделать что бы оно было одинаковым размером?

Comments

[lUser L]

Если кто-то понял суть вопроса, объясните мне)

просто очень интересно (особенно - height: 0px;)

[WapSter]

min-width должен помочь

[Ankhena]

Довольно странный вопрос.
Если блок должен сохранять свои размеры в px, то задавать в px.
Если доли от ширины родителя, то %
Если от размера окна, то vw, vh.

Answer 1

[Юпитер Макс]

ну так смотрите в стилях медиазапросы

Answer 2

[AlexsandrLomaev]

media ( max-width: 500px ) {
Здесь задаешь размер и вме
}