постепенно уменьшайте поля тела до 0 при изменении размера экрана - PullRequest
Новая
       9

постепенно уменьшайте поля тела до 0 при изменении размера экрана

0 голосов
/ 27 февраля 2020

Я смотрю страницу в разрешении 1920 * 1080. Он слишком широк, чтобы распространять весь контент справа налево, поэтому я применяю к телу: 

width: 77%;
background: #eee;

Чтобы получить серые поля.

77% * 1920 = 1478, так что это означает, что Я бы не хотел, чтобы размер поля был меньше 1478 пикселей.

Однако, когда размер окна уменьшается до 1478, я также хочу уменьшить поля. Например: 1920-1478 = 442, половина - 221, поэтому, когда размер окна 1478 + 221 = 1699, поля должны составлять около 88,5%, а не 77%.

Так что мне нужно немного расчет, который будет делать это для любого заданного размера. Это обычная практика, не так ли? но как это сделать? 

body {

  width: 77%;
  background: #eee;
  margin: 0 auto;
}

   @media (max-width: 1700px) {
       body {
    width: 89%;
       }
  }

   @media (max-width: 1498px) {
       body {
    width: 100%;
       }
  }

1 Ответ

1 голос
/ 27 февраля 2020

На самом деле вы пытаетесь присвоить контейнеру max-width: 1498px, поэтому вместо применения правила к body используйте элемент контейнера (например, <main>) и задайте ему выравнивание по центру, используя margin: 0 auto

См. Пример с большим разрешением 

body {
   padding: 0;
   margin: 0;
   background: #eee;
}
main {
   max-width: 1498px;
   background: #fff;
   margin: 0 auto;
}
<main>

   main element
   
</main>
...