Как динамически изменить размер макета страницы в соответствии с размером окна? - PullRequest
Новая
       0

Как динамически изменить размер макета страницы в соответствии с размером окна?

1 голос
/ 12 ноября 2011

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

Я пошел вперед и разместил код на сервере, чтобы его можно было легко просмотреть. Я сделал это в основном для тестирования.Проект является добровольным и в конечном итоге будет использоваться в качестве инструмента обучения языку.Я просто пытаюсь получить макет так, чтобы он динамически изменял размер, не искажая макет.

При текущей настройке мне приходится вручную уменьшать масштаб, если разрешение экрана низкое, чтобы макет правильно вписался вscreen.

В настоящее время я использую абсолютное позиционирование в CSS для позиционирования элементов страницы относительно фонового изображения, их необходимо правильно расположить, чтобы они соответствовали фоновому шаблону.

Страница может бытьпри просмотре по номеру http://www.kapacitive.com/Main_Page_Template.html потребуется просмотреть исходный код страницы для просмотра кода.

Еще раз благодарю за любую помощь, и, пожалуйста, если у вас нет что-то полезного сказать, просто не отвечайте,Спасибо.

Ответы [ 3 ]

4 голосов
/ 12 ноября 2011

Чтобы получить несколько динамичный макет, вы можете использовать медиазапросы CSS3: 

@media (max-width: 800px) {
  foo {
    ...
  }
}

@media (max-width: 500px) {
  foo {
    ...
  }
}

Они ориентированы на определенные размеры экрана.

1 голос
/ 12 ноября 2011

Удалите ширину тела и установите эти стили для ваших главных кубов навигации: 

#mainNavCubes {
  position: absolute;
  left: 50%;
  top: 170px;
  margin-left: -240px;
}

Это позволит установить их положение в середине экрана, а с отрицательным полем вы можете сдвинуть их влево.

0 голосов
/ 10 мая 2012

Я нашел расширение для веб-разработчиков для Firefox или Chrome
Проверьте следующую ссылку:
https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
очень полезно для измерения размера окна и окна просмотра. Это также позволяет вам установить размер окна в соответствии с несколькими размерами по умолчанию.

(Он также содержит множество других полезных инструментов для веб-разработки.)

...