Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как верстать под физические размеры экрана?


Автор: neosapient 4.5.2014, 14:45
Здравствуйте.
Как узнать физические размеры экрана? Привязать мои css под разные габариты экранов?

Столкнулся со следующей проблемой: сверстал html-страницу, все параметры указывал в "pt" (как я понял 1 pt = 1/72 дюйма). Сверстал так, чтобы сайт красиво смотрелся на моем ноутбуке. Но когда посмотрел на вертикально расположенном планшете, то сайт предстал очень мелким.

Рассмотрим пример. 
Допустим, я хочу вывести на экран 6 квадратных блоков, у которых итоговая видимая ширина и высота равны 2 дюймам ( = 2 * 72pt = 144pt = 10pt + 124pt + 10pt). Для всех блоков применен стиль "float:left".
Код

<!DOCTYPE html>
<html>
<head>
  <style>
  div.square{
    margin: 10pt;
    padding: 0;
    width: 124pt;
    height: 124pt;
    background: #777;
    float: left;
  }
  </style>
</head>
<body>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>  
</body>
</html>


Возьмем мой ноутбук. Диагональ экрана 15 дюймов, соотношение сторон 9:16. Соответственно, высота экрана 7,35 дюйма, а ширина экрана 13,08 дюйма.
В таких условия отображается строка из 6 квадратов.

Возьмем планшет. Диагональ экрана 7 дюймов, соотношение сторон так же 9:16. Соответственно когда планшет повернут вертикально, ширина экрана 3,43 дюйма, а высота экрана 6,10 дюйма. 
Теоретически на одну строчку экрана должен влезть только 1 квадрат. 
На практике, все квадраты умещаются на одной строчке, при этом они становятся очень маленькими.

Что делать?

Автор: Cheloveck 4.5.2014, 16:11
Предлагаю порыться http://getbootstrap.com/2.3.2/scaffolding.html#responsive.

Автор: DeadButHappy 4.5.2014, 22:43
Цитата(neosapient @  4.5.2014,  14:45 Найти цитируемый пост)

Что делать?


Предлагаю использовать медиа-запросы.
Это когда в зависимости от разрешения экрана меняются стили.
Тоесть для каждого диапазона разрешений браузера у Вас будет свой набор стилей CSS.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)