Как я могу масштабировать ширину веб-страницы (в пикселях) до любого размера экрана? - PullRequest
3 голосов
/ 28 мая 2011

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

Ответы [ 4 ]

3 голосов
/ 28 мая 2011

Если вы хотите, чтобы ваша страница занимала 100% ширины, просмотрите эту статью: Жидкий макет

Если вы пытаетесь центрировать содержимое с фиксированной шириной на любой ширине страницыпросто используйте:

margin: 0px auto;
2 голосов
/ 28 мая 2011

Вам нужен не жидкий макет, а «эластичный» макет с приложенным сценарием «автоматического растяжения».

Есть несколько шагов, чтобы заставить это работать:

  • Создайте макет, используя ems для размеров (вместо размеров в пикселях). Это делает макет «масштабируемым» при сохранении правильных пропорций.
  • Примените масштабное значение к элементу <body> в процентах. Этот параметр по умолчанию полезен, потому что он устанавливает 1em равным 10 пикселей почти во всех браузерах:

    body {font-size:62.5%;}
    

    Это будет означать, что ваш макет будет иметь ширину 97em.

  • Используйте javascript, чтобы определить ширину страницы пользователя, и отрегулируйте значение масштабирования на теле, чтобы изменить масштаб изображения, чтобы он соответствовал странице. Вы бы хотели, чтобы это запускалось хотя бы один раз, когда страница загружается, и, возможно, при изменении размера браузера.

Вот хорошая отправная точка для эластичных макетов: http://www.alistapart.com/articles/elastic

1 голос
/ 28 мая 2011

Вы не должны устанавливать ширину.Содержимое страницы будет расширено, чтобы заполнить весь экран по умолчанию.

Если вам нужно найти фактическую ширину элемента, вы всегда можете узнать это.Если вы используете JQuery, это

var width = $("#my-element").width()
0 голосов
/ 28 мая 2011

Если вы понимаете, к чему вы клоните, это звучит так, как будто вы неправильно настроили свои поля. чтобы центрировать ваш контент, вы хотите, чтобы ваш код выглядел примерно так: http://jsbin.com/uyolo4/4/edit

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