0

iPad 固有の Web サイト (デスクトップ ユーザー用に別の Web サイトを作成しています) を作成し、ポートレート モードとランドスケープ モード用に異なる CSS を書きたい場合、どの方法を使用しますか?

最初の方法

1 つの http リクエストだけで 1 つの CSS ファイルを保持できます

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

内部でメディアクエリを使用して、コードを分離しておきます

/* CSS for landscape here */

#wrapper {width:1024px}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

2番目の方法

2 つの http リクエストで 2 つの CSS ファイルを使用できます。

<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

どちらの方法を希望し、改善すべき提案があれば教えてください。

注:タブレット用に別の Web サイトを作成しています。デスクトップ用とモバイル用ではありません。

編集 2: *最初の方法では、ランドスケープも指定した方がよいか、必要ありません。*

これを最初のメソッドコードと比較してください

/* CSS for landscape here */

@media only screen and (orientation:landscape){
#wrapper {width:1024}
}

/* CSS for portrait here */

@media only screen and (orientation:portrait){
#wrapper {width:768px}
}

style="text/css"css リンクから削除してもよろしいですか?

<link href="style.css" rel="stylesheet" media="all" />

また、リンクを維持media="all"する必要がありますか、それとも必要ありませんか?

4

2 に答える 2

4

CSS全体が最初のリクエストでキャッシュされるため、最初のものをお勧めします。2 番目のものでは、他のモードの CSS をダウンロードする必要があるため、画面の向きの変更は最初のものほどスムーズではありません。

于 2011-07-27T07:53:07.663 に答える
0

すべてを 1 か所にまとめるのが好きなので、私自身は最初の方法を好みます。の必要性についてはstyle="text/css"、少なくとも HTML5 doctype では必要ありませんが、ベスト プラクティスとして残っていると思います。についても同様ですmedia="all"。

于 2011-07-27T15:37:18.517 に答える