Как расположить кнопки для размещения на мобильном устройстве?

#css #responsive-design

#css #адаптивный дизайн

Вопрос:

У меня есть простая страница со следующим кодом:

 body {
  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}

.container:before,
.container:after {
  content: "";
  display: table;
}

.container:after {
  clear: both;
}

.container {
  background: #eaeaed;
  *zoom: 1;
}

.container,
section,
aside {
  border-radius: 6px;
}

section,
aside {
  background: #2db34a;
  color: #fff;
  margin: 1.858736059%;
  padding: 20px 0;
  text-align: center;
}

@media all and (min-width: 420px) {
  .container {
    max-width: 538px;
  }
  section {
    float: left;
    width: 63.197026%;
  }
  aside {
    float: right;
    width: 29.3680297%;
  }
}

 <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Responsive</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
  <div class="container">
    <section>Section</section>
    <aside>Aside</aside>
  </div>
</body>

</html>

Кнопки расположены рядом друг с другом на более широком экране, но когда я уменьшаю ширину браузера, это не делает их сложенными, как в этом примере:

https://codepen.io/shayhowe/pen/KcApz

Я использую тот же код.

Это не работает в Chrome, но работает в Firefox.

В Chrome это выглядит следующим образом:

И я не могу уменьшить его больше.

Как заставить это работать в Chrome?

1. Кажется, в Chrome все работает нормально?

2. Пожалуйста, проверьте это еще раз, он работает в Chrome, Firefox и Safari. спасибо

3. Я проверил это снова, и это не работает. Пожалуйста, взгляните на снимок экрана, который я добавил выше.

4. @tesicg Откройте инструмент инспектора (F12 или Ctrl Shift i) в левой верхней части есть значок мобильного устройства. Нажмите, чтобы открыть предварительный просмотр для мобильных устройств, вы можете выбрать нужное устройство из списка вверху.

5. ширина 449px недостаточно узкая, чтобы кнопки были расположены в соответствии с вашим css. Вам нужно изменить его размер, чтобы он был меньше 420 пикселей в ширину.

Ответ №1:

Я использую Chrome, кажется, он работает нормально. Но я бы изучил использование display: grid , чтобы помочь вам с укладкой и перемещением различных элементов внутри другого элемента.

Он не поддерживается на 100% во всех браузерах (https://caniuse.com/#search=grid ), но это работает в Chrome, очень полезно удалить все использование ::after и ::before .

Узнайте больше здесь: https://www.w3schools.com/css/css_grid.asp

Редактировать:
Вы не можете уменьшить Chrome больше, потому что это предел, до которого приложение Chrome позволяет уменьшить размер. Если вы хотите видеть меньший размер окна, включите Инструменты разработчика (нажмите 12) и попробуйте уменьшить размер вашего браузера.

Кроме того, ваш стиль css может быть кэширован в вашем браузере. Обновите страницу, нажав SHIFT F5 .