Мои HTML элементы меняют положение в зависимости от размера экрана

Question

У меня проблема с позиционированием HTML элементов. Я знаю, что у этого есть довольно простой ответ, но я борюсь с этой проблемой на каждом веб-сайте, который я создаю, и я новичок ie в веб-разработке.

.artstation_b{
    position: absolute;
    left: 45%;
    top: 395%;
}
.behance_b{
    position: absolute;
    left: 49%;
    top: 394.5%;
}
.instagram_b{
    position: absolute;
    left: 53%;
    top: 395%;
}

Я выкладываю свои изображения вот так если я не установлю абсолютное положение, я просто не смогу получить желаемый результат. А я использую absolute, потому что выкладываю изображения на изображения. Если я этого не сделаю, они будут размещены под изображением или рядом с ним.

Итак, все, что я делаю, отлично работает на моем экране 1080p, но когда я использую другой экран 1080p с другим размером экрана, все идет наперекосяк.

Answer 1

вам следует использовать медиа-запросы, чтобы задать стиль вашего различного содержимого в соответствии с разным размером экрана, вот несколько типов медиа-запросов, и надеюсь, вы найдете его полезным

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
 /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
 /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
 /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
 /* styles */
}