Как установить максимальную ширину с помощью flexbox и избежать скачков с медиа-запросами - PullRequest
Новая
       44

Как установить максимальную ширину с помощью flexbox и избежать скачков с медиа-запросами

0 голосов
/ 08 мая 2020

У меня есть 3 коробки с 3 продуктами (Ragnar, Thor и Odin), созданными с помощью flexbox. Они отлично работают в мобильной версии, но когда я изменяю размер окна браузера до версии для планшета или компьютера, поля внезапно становятся больше из-за медиа-запроса. Я работаю с max-width в пикселях. Я хочу сделать его более отзывчивым, но не знаю, как это сделать. основных элементов.

Вот ссылка пера: https://codepen.io/aitormorgado/pen/MWayXPy

Вот код для идентификатора раздела и класса бокса: 

#models-section {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 5.5rem;
}

.product {
  margin: 3rem auto;
  border: 1.5px solid black;
  line-height: 1.8;
  max-width: 260px;
}

А это медиа-запрос: 

@media only screen and (min-width: 768px) {
  html,
  body {
    max-width: 70vw;
    margin: 0 auto;
  }

  .product {
    max-width: 400px;
    font-size: 3.5rem;
  }

}

1 Ответ

0 голосов
/ 03 июля 2020

Я попробовал это и обнаружил, что ваш код требует очень мало мелких изменений. Установите для .product следующую ширину: 

.product {
    margin     : 3rem auto;
    border     : 1.5px solid black;
    line-height: 1.8;
    min-width  : 260px;
    width      : 40%;
}

И удалите ширину в своем медиа-запросе. Это может быть не идеально. Но с этого момента вы сможете оптимизировать его самостоятельно.

Вы установили фиксированную ширину на 260 пикселей и 400 пикселей для более широких экранов. Вы не оставляете места для переходов между двумя значениями. Относительное значение с% должно исправить это.

Однако у вашего кода есть некоторые другие зависимости, которые я не могу контролировать. Удачи!

...