Сделайте отступы отзывчивыми

Question

Я только начал использовать Bootstrap, и в целом я новичок в интерфейсной разработке. У меня проблема с заполнением, так как он остается того же размера на настольных и мобильных устройствах.

HTML код:

  <div class="container" id="i-container">
        <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3>
  </div>

Код CSS:

  #i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 150px
        padding-top: 10px;
    }

Как я уже упоминал выше, на мобильных устройствах отступы остаются прежними (похоже, не реагируют). Кстати, я тоже пробовал использовать em . Это тоже не помогает.

html css

11

Anon Ymous 4 Сен 2016 в 23:10

Answer 1

Используйте процент как единицу измерения, чтобы сделать ваш сайт адаптивным. Пиксели не работают, если вы хотите, чтобы они были отзывчивыми. Если вы используете процентное соотношение, измерение производится в соответствии с размером экрана. Но если вы используете пиксели, отступы остаются одинаковыми для всех размеров. Просто измените свой CSS, как показано ниже:

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

Используйте желаемый процент.

18

Pragyakar 4 Сен 2016 в 20:51

Answer 2

Поскольку мы не знаем, что вы хотите создать и какой результат ищете, довольно сложно написать что-то конкретное.

С учетом сказанного: пиксели будут пикселями независимо от устройства, с которого вы открываете сайт. Таким образом, установка фиксированного размера для элементов часто приводит к тому, что элементы выходят за пределы видимой области и т.п. Вероятно, это то, что вы испытываете. Установка отступов с пикселями сохранит именно такое количество отступов независимо от того, какое устройство использовалось для открытия сайта.

НО вы упомянули Bootstrap, у которого есть неплохая сеточная система, которая работает независимо от устройства. Они используют медиа-запросы, чтобы контролировать устройство и макет. В частности, они используют .col-xs- (меньше 768 пикселей), .col-sm- (больше или равно 768 пикселей), .col-md- (больше или равно 992 пикселей), .col-lg- (больше чем или равно 1170 пикселей). Это означает, что вы можете размещать свой контент в группах и строках, где вы можете полностью контролировать то, как они отображаются и размещаются на экранах разных размеров.

Поэтому для вашего проекта и для лучшего контроля над макетом и размещением я бы порекомендовал вам взглянуть на систему сеток ЗДЕСЬ.

2

chrisv 4 Сен 2016 в 20:26

Answer 3

В CSS есть значения, которые используются для определения размеров объектов по отношению к области просмотра (размеру окна браузера). Одна единица измерения составляет 1% от одной из осей области просмотра. Они могут быть полезны для адаптивного дизайна, то есть для разработки веб-сайтов, которые хорошо выглядят на экранах разных размеров, с использованием доступного им пространства.

padding: 1vw // 1% of viewport width
padding: 1vh // 1% of viewport height
padding: 1vmin // 1vw or 1vh, whichever is smaller
padding: 1vmax // 1vw or 1vh, whichever is larger

И вы также можете использовать макет на основе сетки из начальной загрузки

2

Shuaib Abubakker Bapputty Haji 15 Июл 2020 в 12:49

Сделайте отступы отзывчивыми

3 ответа

Похожие вопросы

Новые вопросы

html