Изменение размера элементов страницы в зависимости от размера окна - PullRequest
Новая
       12

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

3 голосов
/ 23 июня 2010

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

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

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

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

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

1 Ответ

3 голосов
/ 23 июня 2010

Просто установите 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 получит распространение (см. в этой таблице ), все станет проще. А пока взгляните на этот ответ (да, это означает: больше разметки).

...