Адаптивная компоновка в Bootstrap 4: какое минимальное поддерживаемое разрешение экрана для очень маленького мобильного устройства? - PullRequest
Новая
       55

Адаптивная компоновка в Bootstrap 4: какое минимальное поддерживаемое разрешение экрана для очень маленького мобильного устройства?

0 голосов
/ 23 января 2019

Bootstrap 4 Документация гласит:

Очень маленькие устройства (портретные телефоны, менее 576 пикселей)

Очевидно, что очень маленькиеустройства с шириной экрана менее 576 пикселей.Ну, меньше 576 пикселей ... и как меньше ?Сетка не может уменьшиться до нуля.Существует предел, до которого макет с использованием сетки Bootstrap может быть сжат без заметных искажений дизайна.Кроме того, существуют устройства с шириной экрана, которая значительно меньше 576 пикселей (320 или 240 пикселей).

Если мы математически представляем поддерживаемую ширину экрана для очень маленьких устройств в видеинтервал, мы получаем [a, b), где b = 576 в соответствии с документацией. Итак, что ... чему равен a?Документация не охватывает этот вопрос.

В приведенном ниже примере кода имеется адаптивный заголовок (контейнер-жидкость со строкой и 12 столбцами).В инструментах разработчика в Chrome я нашел значение a = 360, которое является последним значением, на котором сетка еще не искажена (при a = 359 12-й столбец не умещается по ширине и переходит в"new row").

Конечно, я могу сбросить отступы, и тогда все подходит как 320, так и 240 px, но это решение не из коробки: 

.row > div {
    padding: 0;
}

360 пикселей действительно минимальная поддерживаемая ширина экрана в Bootstrap 4?

Пример для быстрого просмотра: 

.header {
  background: rgb(240,240,240);
  min-height: 70px;
  border-bottom: 1px solid gray;
  align-items: center;
  text-align: center;
}

.logo {
  border: 1px dashed black;
  height: 40px;
  width: 100px;
  display: inline-block;
}
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row header">
    <div class="col-1">
      <i class="fas fa-bars"></i>
    </div>
    <div class="col-9 text-center">
      <div class="logo">Logo</div>
    </div>
    <div class="col-1">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <div class="col-1">
      <i class="fas fa-search"></i>
    </div>
  </div>
</div>

Тот же код для простого копирования в текстовый редактор (может быть, кто-то хочет заглянуть в инструменты разработки): 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <style type="text/css">
        .header {
            min-height: 70px;
            border-bottom: 1px solid gray;
            align-items: center;
            text-align: center;
        }

        .logo {
            border: 1px dashed black;
            height: 40px;
            width: 100px;
            display: inline-block;
        }
    </style>

</head>
<body>
    <div class="container-fluid">
        <div class="row header">
            <div class="col-1">
                <i class="fas fa-bars"></i>
            </div>
            <div class="col-9 text-center">
                <div class="logo">Logo</div>
            </div>
            <div class="col-1">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="col-1">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 23 января 2019

Вы правы, минимальное поддерживаемое разрешение при начальной загрузке составляет 240 х 320 пикселей.Разработчики bootstrap определили минимальную ширину с учетом текущего рынка.Большинство телефонов с функциональной панелью, появившихся в наши дни, имеют разрешение 240х320.Однако, если вы хотите запустить код в какой-то старой школьной линейке, например Samsung Guru с разрешением 128 x 160, вы можете соответствующим образом определить медиазапросы.

...