3

自分の Web サイト (Web コミュニティ) のモバイル バージョンを作成したいと考えています。私が始めたとき、表示要素の配置は、水平画面と垂直画面で異なる必要があるという問題に気付きました。また、デバイスの向きが変わった場合でも、(可能であれば) 切り替える必要があります。可能であれば、JavaScript の必要性を回避しながら、通常の Web ページ (HTML、CSS、JavaScript) を作成することを目的としています。

Android アプリ (UI-Thread) の場合、通常、ソース コードに 2 つのレイアウトを配置できます。CSS で利用できる同様のものはありますか?

どのような答えが期待できますか?

  1. 可能であれば、それを行う方法のいくつかの CSS の例。
  2. 追加: 既存のページのモバイル バージョンを作成するためのいくつかの便利なチュートリアル。役立つと思います (ただし、主な焦点は画面の水平/垂直にあります)...
4

2 に答える 2

14

「タグ付け」した後、自分で答えを見つけたので、正しい検索用語を見つけたようです：

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]
}
于 2012-08-18T13:57:40.133 に答える
2

あなたが探しているのは「レスポンシブ Web デザイン」です。これにより、css 内でレイアウトを検出し、レイアウトが変更されたときに JavaScript イベントをトリガーし、画面の幅/高さに基づいて CSS 要素を配置できます。

このスライド デッキを出発点としてお勧めします: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

于 2012-08-18T13:57:13.873 に答える