Изменение размера элементов страницы в зависимости от размера окна

Проблема: мой клиент хочет, чтобы я создал стартовую веб-страницу для его продукта, чтобы на ней не было прокрутки, не было никаких размеров браузера или окна.

Сомнение: возможно ли это с помощью CSS и Javascript?

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

Итак, утверждение: мне нужно изменить размеры каждого элемента (изображения, блоки div, текст ... все) на основе соотношения между (текущим размером окна и ссылкой размер окна). Возможно, у Javascript есть лекарство от этого?

Вопрос: как это сделать?


javascript jquery css dimensions resize
person OrangeRind    schedule 22.06.2010    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Просто установите height и width <html> и <body> на 100%, overflow на hidden и используйте проценты для left, top, width и height элементов:

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

Эти проценты относятся к содержащему блоку, то есть в данном случае <body>.

Обновление: Отвечу на другой вопрос: масштабирование фоновых изображений пока почти не поддерживается. Когда свойство CSS 3 background-size набирает силу (см. эта таблица), все будет Полегче. А пока взгляните на этот ответ (да, это означает : больше разметки).

person Marcel Korpel    schedule 22.06.2010
comment
это, конечно, возможно, но позаботится ли я о том, чтобы я отображал фон DIV в целом? coz, в маленьком окне фон будет обрезан, а в большом - повторяться ... :) - person OrangeRind; 23.06.2010
comment
Кроме того, поскольку я обработал большую часть страницы с помощью CSS, до того, как этот специальный запрос от моего клиента упал, я надеялся, что существует решение, которое не заставит меня снова изменить CSS. ;);) - person OrangeRind; 23.06.2010
comment
@Orange - Вы имеете в виду, что вы хотите, чтобы фон был масштабирован до полного размера div? - person Marcel Korpel; 23.06.2010
comment
@Orange - Относительно вашего второго замечания: нет, вы почти не можете этого сделать, не изменив CSS и, возможно, структуру HTML. Такие презентационные вещи тесно связаны с разметкой и CSS. Единственный способ сделать это, не меняя HTML или хотя бы CSS, - это действительно использовать JavaScript. Но вы действительно, действительно не хотите делать это таким образом, вам не следует возиться с позициями всех элементов в JavaScript (а JavaScript может быть отключен или заблокирован в браузере вашего посетителя). - person Marcel Korpel; 23.06.2010
comment
@marcel ага, масштабирование нужно. : '(... Хотя решение JS также может помочь, хотя я могу попробовать потратить время на корректировку в CSS, просто этого времени мало. :) - person OrangeRind; 23.06.2010
comment
@Orange - Хотя я понимаю вашу позицию, и вы не всегда сможете что-то улучшить, примите во внимание следующее: «до того, как поступил этот специальный запрос от моего клиента» и «времени мало». Поскольку это «особый запрос», который, по-видимому, неизвестен, когда вы оба принимали решение относительно сайта, у вас есть хорошее основание попросить больше времени на его переработку. - person Marcel Korpel; 23.06.2010
comment
@marcel а .. конечно. ;) хотя обновленная ссылка в ответе тоже хороша. Большое спасибо за все это. :) - person OrangeRind; 23.06.2010