Блог

Главная - Вопросы по программированию - Отображение Css: столбец сетки становится скрытым на устройствах с меньшим экраном

Отображение Css: столбец сетки становится скрытым на устройствах с меньшим экраном

#html #css #media-queries #css-grid #mobile-devices

#HTML #css #медиа-запросы #css-grid #мобильные устройства

Вопрос:

У меня есть следующая html-страница :

 .main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  /*font-size: 55px;*/
}

.main>div {
  height: 200px;
}

.main>div:first-child {
  border: solid 3px red;
}

.main>div:last-child {
  border: solid 3px blue;
}  
 <div class="main">
  <div>
    contents 1
  </div>
  <div>
    contents 2
  </div>
</div>

Ожидаемый результат на обычных экранах
И результат в порядке, как я и ожидал (синий div имеет вдвое большую ширину, чем красный div). Но когда я меняю размер экрана на меньший, чем 246px синий, div начал скрываться под краем браузера :

Некоторая часть синего div скрыта на экранах размером менее 246 пикселей

Как я могу сохранить соотношение двух div при меньших размерах экрана?

Обновление: размер шрифта был удален, но проблема все еще существует.

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

1. Я не вижу здесь проблемы.

2. Что вы ожидаете от этого? 246 сравнительно мало : (

3. У вас есть какой-либо код, который мы не видим? Хотя я бы не стал слишком беспокоиться, самый маленький современный экран составляет около 320 пикселей.

4. @Дерек. W части div скрыты, и я хочу, чтобы он был виден на экране, как обычный.

5. Вы запустили фрагмент? Если ширина экрана не маленькая, она работает без проблем.

Ответ №1:

Вам необходимо добавить мета-тег области просмотра, а также очистить начальные поля и отступы тегов html и body

окончательные коды должны быть следующими

 <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }

        .main {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .main>div {
            height: 200px;
        }

        .main>div:first-child {
            border: solid 3px red;
        }

        .main>div:last-child {
            border: solid 3px blue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>
            contents 1
        </div>
        <div>
            contents 2
        </div>
    </div>
</body>

</html>