Как автоматически настроить выравнивание веб-страницы на разное разрешение экрана?

Question

Я делаю проект на ASP.NET, и у меня есть разрешение 1280x800.Я использую ширину веб-страницы 1245px, которая отлично работает в моей системе, но когда я использую сайт с разрешением 1024x768, выравнивание выходит из браузера.Я использую <div> width 1245px, что выглядит неплохо на разрешении 1280x800.
. Я пробовал этот код, но он выдает ошибку.

protected void Page_Load(object sender, EventArgs e)
    {
        div1.Style.Add(HtmlTextWriterStyle.Width, System.Windows.Forms.Screen.PrimaryScreen.Bounds.Width.ToString());
    }

Выдает ошибку, что

Тип или имя пространства имен 'Windows' не существует в пространстве имен 'Система' (отсутствует ссылка на сборку?) `

Так есть ли простой способ исправить это.

Answer 1

Проблема с разрешением экрана заключается в том, что если вы не попытаетесь использовать священный Грааль и использовать жидкие макеты (боль в области а **), то вы действительно не сможете реально поддерживать различные разрешения экрана. Я полагаю, что вы могли бы использовать много необычного javascript, но ... О-о-о ... и кошмар обслуживания ... плюс это бы затопило ваши страницы.

Вы должны просто настроить свой веб-сайт таким образом, чтобы отображать контент только в предполагаемом окне 1024 x 768, поскольку это самый распространенный размер экрана на сегодняшний день.

Общий способ сделать это состоит в том, чтобы центрировать div размером 1024x768, используя автоматические поля так, чтобы остальное было просто лишним пробелом.

<div id="MainContainer">
My content here
</div>

  #MainContainer
  {
      width: 1024px;
      height: 768px;
      margin: auto;
  }

Это не решит проблему вертикального центрирования вашего контента. Один из подходов, который я предпочитаю, - это использовать абсолютное позиционирование, чтобы центрирование не имело значения. Я могу просто настроить страницу, чтобы растянуть, чтобы соответствовать размеру окна, используя вместо этого этот CSS:

  #MainContainer
  {
      position: absolute;
      top: 0;
      bottom: 0;

      width: 1024px;
      height: 768px;
      margin: auto;
  }

Это заставит div растягиваться от верхней части окна к нижней. Мне нравится это решение, потому что оно поддерживается большинством браузеров и их различными версиями и даже отлично справляется с масштабированием.