Автоматически переключать горизонтальный/вертикальный дизайн с помощью CSS (без JavaScript)?

Я хочу создать мобильную версию своего сайта (веб-сообщества). Когда я начал, я только что заметил проблему, что позиционирование элементов отображения должно отличаться для горизонтальных и вертикальных экранов. И он должен даже (по возможности) переключаться, если аппарат перевернуть. Цель состоит в том, чтобы написать обычную веб-страницу (HTML, CSS, JavaScript), по возможности избегая использования JavaScript.

Для приложений Android (UI-Thread) вы обычно можете поместить два макета в свой исходный код... есть ли что-то подобное для CSS?

Каких ответов я жду?

  1. Несколько примеров CSS, как это сделать, если это возможно.
  2. Дополнительно: несколько полезных руководств по созданию мобильных версий существующих страниц, которые, по вашему мнению, будут полезны (но: основное внимание уделяется экрану по горизонтали/вертикали)...

mobile layout css screen-orientation
person SDwarfs    schedule 18.08.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

То, что вы ищете, это «отзывчивый веб-дизайн». Это позволяет вам внутри вашего css обнаруживать макет, запускать события javascript при изменении макета и размещать элементы CSS в зависимости от ширины/высоты экрана.

Я могу порекомендовать эту презентацию в качестве хорошей отправной точки: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

person Jure C.    schedule 18.08.2012
comment
Пожалуйста, включите фактический ответ, а не только ссылку meta.stackexchange.com/questions/225370/ - person torvin; 19.12.2019

arrow_upward
14
arrow_downward

Кажется, я сам нашел ответ после «пометки» и, следовательно, нашел правильные условия поиска:

http://www.mollerus.net/tom/blog/2010/04/screen-orientation_and_css.html

Либо свяжите разные файлы CSS:

<link rel="stylesheet"
      media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet"
      media="all and (orientation:landscape)" href="landscape.css">

Или поместите CSS в таблицу стилей следующим образом:

@media all and (orientation:landscape) {
   [styles for landscape orientation]
}

@media all and (orientation:portrait) {
   [styles for portrait orientation]
}
person SDwarfs    schedule 18.08.2012