Установка сайта на размер экрана

Question

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

@media only screen and (min-width : 1366px) { 
    #wrapper { 
     width: 1400px; 
     height: 750px; 
     position: absolute; 
    } 
} 

Теперь выше будет отображаться размер экрана в 1400 пикселей, если размер экрана по крайней мере, 1366. Тем не менее, если размер экрана составляет 1400 пикселей, а экран только случается 1366 пикселей вам придется прокручивать бок о бок. Это моя проблема, но у меня есть идея, как это решить. Я хотел бы сосредоточить 1366 пикселей содержимого в середине, а затем, если размер экрана больше, левые над пикселями будут поделены по сторонам поровну. Пример:

Размер экрана составляет 1500 пикселей. Минимальный размер экрана - 1200 пикселей. Затем 150 пикселей будут добавлены к каждой стороне содержимого 1200 пикселей (смысл осталось на 300 пикселей).

Теперь по бокам, где нет контента (потому что пиксели больше), я хочу, чтобы цвет фона. Так просто, как я могу это достичь? Если это не имеет смысла, просто опубликуйте комментарий, и я постараюсь сделать это более ясным. Thank you :)

EDIT: Люди спрашивают, почему вы не можете просто сделать ширину: 100%. Это не сработает, потому что если вы уменьшите размер экрана, это все испортит.

Answer 1

Добро пожаловать в SO. Вы правы, ваш вопрос слишком сложный для вопроса, который вы задаете. То, что вы по существу задаете, - это «как центрировать div».

#wrapper { 
    margin: 0 auto; 
} 

Для фона, вы можете сделать:

body { 
    background-color:#000; 
} 

Edit для вашего первого вопроса: #wrapper {overflow:hidden} удалить полосы прокрутки, хотя это было бы только действительно применимы для изображений, в противном случае вы могли бы пойти 100% по ширине. В зависимости от вашего дизайна вы можете воспользоваться возможностью чтения на адаптивных средах.

Answer 2

Попробуйте это:

CSS

@media only screen and (min-width : 1366px) { 
    #wrapper { 
      width: 100%; 
      height: 750px; 
      position: absolute; 
    } 
} 

Answer 3

Я не уверен, что вы просите. Я думаю, что это он:

@media only screen and (min-width : 1366px) { 
    #wrapper { 
     width: 1400px; 
     height: 750px; 
     position: absolute; 
     left: 50%; 
     transform: translateX(-50%); 
    } 
} 

Я думаю, @SajadLfc ответил на ваш вопрос, но все еще не уверен, потому что он получил downvote:/

Answer 4

Чтобы получить ширину и высоту экрана

использовать это,

width = screen.width; 
height = screen.height; 

и

width = window.innerwidth; 
height = window.innerheight; 

Надеюсь, это поможет.