css Как получить маржу на элементе при реагировании - PullRequest
Новая
       1

css Как получить маржу на элементе при реагировании

0 голосов
/ 20 марта 2020

У меня есть простая проблема, я не могу вспомнить, как это сделать

В моем примере у меня есть div, который имеет ширину и центрирован с помощью поля auto.

Когда размер окна изменяется, я хочу div должен иметь левую и правую границу, когда окно касается div.

В момент изменения размера окна div касается края окна.

Я хочу, чтобы оно было эта ширина до тех пор, пока окно не станет маленьким, а затем оно будет иметь левое и правое поле 

*{
  margin: 0;
  padding: 0;
}

.block{
  background: red;
  height: 100px;
  margin: 0 auto;
  width: 600px;
}
<div class='block'>

</div>

Ответы [ 3 ]

1 голос
/ 20 марта 2020 
@media (max-width: 600px) {
    .block {
        margin: 0 11px;
    }
}
0 голосов
/ 20 марта 2020

Вы можете использовать медиазапросы для управления стилями ваших элементов.

Пример:

В следующем примере цвет фона меняется на светло-зеленый, если область просмотра имеет ширину 480 пикселей или больше (если область просмотра меньше 480 пикселей, цвет фона будет розовым) 

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

для более и ссылка на устройство различной ширины 

      * {
        margin: 0;
        padding: 0;
      }

      .block {
      text-align:center;
        background: red;
        height: 100px;
        margin: 0 auto;
        width: 600px;
      }

      @media (max-width: 400px) {
        margin: 0 50px;
      }
      @media (min-width: 401px) and (max-width: 800px) {
        margin: 0 30px;
      }
      @media (min-width: 801px) {
        margin: 0 10px;
      }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>repl.it</title>
    
  </head>
  <body>
    <div class="block">1</div>
    <script src="script.js"></script>
  </body>
</html>
0 голосов
/ 20 марта 2020

Вам просто нужно добавить max-width: 90% или что-то еще, что исправит ваше требование. 

*{
  margin: 0;
  padding: 0;
}

.block{
  background: red;
  height: 100px;
  margin: 0 auto;
  width: 600px;
  max-width: 90%;
}
<div class='block'>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...