Блог

Главная - Вопросы по программированию - Как сохранить элемент в том же месте при изменении размера экрана?

Как сохранить элемент в том же месте при изменении размера экрана?

#html #css #grid

#HTML #css #сетка

Вопрос:

Есть ли способ сохранить элемент в том же месте при изменении размера экрана без использования запросов to many media? У меня уже есть медиа-запросы на веб-странице, но я не могу заставить элемент оставаться в том же месте.

 @media(max-width:550px){ #header{height:150px;} }

@media(max-width: 600px){#nacap{ position:relative; left:200px; top:0px; font-size: 30px;} #header{height:150px; overflow: scroll;} }

@media(min-width: 600px){#nacap {position:relative; left:60px; top:0px; font-size: 30px; } }

@media(min-width: 1000px){ #nacap{ position:relative; left:-65px; top:0px; font-size: 30px; } }

Вот ссылка на страницу:https://codepen.io/code7722/pen/PoNZaKR

Вы можете видеть, что когда вы уменьшаете экран, элемент с идентификатором nacap удаляется, а затем возвращается из изображения заголовка. Кстати, весь заголовок представляет собой сетку, возможно, в этом моя проблема.

Заранее благодарю вас за вашу помощь!!!

Комментарии:

1. Я не совсем понимаю, в чем ваша проблема. Вы пытались установить позицию с помощью absolute (исправить положение в DOM) или static (исправить положение в окне)?

Ответ №1:

Ну, во-первых, точки останова вашего медиа-запроса «ужасно запрограммированы». Ваши контрольные точки

@media (max-width: 550px) и @media (max-width:600px) можно адресовать тот же экран, как если бы экран имел ширину 500 пикселей, тогда он полностью удовлетворяет требованиям обоих. То же самое для запросов минимальной ширины. Если ваш экран теперь имеет размер ровно 600 пикселей, то у вас та же проблема, поскольку он полностью выполняет 2 из 4 запросов. Он заполняется как минимум на 600 пикселей и как максимум на 600 пикселей.

Кроме того, ваше форматирование трудно проверить и прочитать.

Правильное форматирование должно быть:

 @media only screen
  and(max-width: 550px) { 
    #header {
      height: 150px;
    } 
}

@media only screen
  and (min-width: 551px)
  and (max-width: 600px) {
    #nacap { 
      position: relative; 
      left: 200px; 
      top: 0px; 
      font-size: 30px;
    } 
    #header {
      height: 150px; 
      overflow: scroll;
    } 
}

@media only screen
  and (min-width: 601px)
  and (max-width: 1000px) {
    #nacap {
      position: relative; 
      left: 60px; 
      top: 0px; 
      font-size: 30px; 
    } 
}

@media only screen
  and (min-width: 1001px) { 
    #nacap { 
      position: relative; 
      left: -65px; 
      top: 0px; 
      font-size: 30px; 
    } 
}

Тогда 2nd, a postion: relative с top и left не работает, если у вас нет родительского элемента с position: absolut . Однако, если вы хотите, чтобы он находился точно в том же месте, было бы разумнее использовать position: fixed .