HTML-интерфейс для всех размеров экрана - PullRequest
3 голосов
/ 19 октября 2011

Во-первых, я не уверен, является ли это на самом деле "законным" вопросом, который нужно задавать здесь, в StackOverflow, поскольку на самом деле речь идет не о программировании, а о части внешнего интерфейса.

Я собираюсь создать веб-страницу, которая будет работать как полноэкранное шоу. Создание настоящего диа-шоу совсем не проблема, но оно должно работать на всех экранах, начиная с iMac 27 "с очень высокими разрешениями, экранами Full HD TV и полностью вниз на iPad.

То, что я до сих пор делал, - это чтобы каждый элемент был в стиле с процентами. Дизайн хорошо выглядит на моем 22-дюймовом экране и на 42-дюймовом телевизоре, но когда он отображается на iPad, iMac (или даже на телевизоре разного размера), он не помещается на экран. Если он отображается на 27-дюймовом iMac, он заполняет только 1/4 экрана, а на iPad элементы слишком велики для отображения.

Мне кажется, что я что-то здесь упустил (?) Или просто невозможно создать полноэкранный веб-дизайн, который работает на всех мониторах?

Любая помощь / вклад в это очень ценится! : -)

Заранее большое спасибо.

  • Бо

РЕДАКТИРОВАТЬ: Я сделал несколько скриншотов для вас:

Первый iMac 27 ":

http://www.bo -mortensen.dk / слайд-шоу / IMAC / firefox_1920x1080.png

http://www.bo -mortensen.dk / слайд-шоу / IMAC / firefox_2560x1440.png

http://www.bo -mortensen.dk / слайд-шоу / IMAC / safari_1920x1080.png

http://www.bo -mortensen.dk / слайд-шоу / IMAC / safari_2560x1440.png

И телевизор:

http://www.bo -mortensen.dk / слайд-шоу / телевизор / firefox_1080i_tv.png

http://www.bo -mortensen.dk / слайд-шоу / телевизор / firefox_720p_tv.png

http://www.bo -mortensen.dk / слайд-шоу / телевизор / safari_1080i_tv.png

http://www.bo -mortensen.dk / слайд-шоу / телевизор / safari_720p_tv.png

И ссылка на решение:

http://grenaabilhus.mercatus -democms.dk /

1 Ответ

1 голос
/ 19 октября 2011

Я бы использовал CSS3 Media Queries , где вы можете установить различные правила и дизайны для разных размеров экрана, таких как:

@ media handheld и (min-width: 20em) {⋮один или несколько наборов правил…}

@ media all и (max-width: 50em) {⋮ один или несколько наборов правил…}

И я бы зашел на этот сайт , отличный пример того, что возможно (попробуйте масштабировать эту страницу и посмотреть, что произойдет ...)

Удачи!

...