| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > как верстать под физические размеры экрана? |
| Автор: neosapient 4.5.2014, 14:45 | ||
| Здравствуйте. Как узнать физические размеры экрана? Привязать мои css под разные габариты экранов? Столкнулся со следующей проблемой: сверстал html-страницу, все параметры указывал в "pt" (как я понял 1 pt = 1/72 дюйма). Сверстал так, чтобы сайт красиво смотрелся на моем ноутбуке. Но когда посмотрел на вертикально расположенном планшете, то сайт предстал очень мелким. Рассмотрим пример. Допустим, я хочу вывести на экран 6 квадратных блоков, у которых итоговая видимая ширина и высота равны 2 дюймам ( = 2 * 72pt = 144pt = 10pt + 124pt + 10pt). Для всех блоков применен стиль "float:left".
Возьмем мой ноутбук. Диагональ экрана 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 |
Предлагаю использовать медиа-запросы. Это когда в зависимости от разрешения экрана меняются стили. Тоесть для каждого диапазона разрешений браузера у Вас будет свой набор стилей CSS. |