1

そのため、@ mediaクエリを使用して、モバイルバージョンのサイトで別のcssファイルを使用しています。これが私のhtmlの頭です：

<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />

<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />

ただし、 mobile.cssにcssルールをロードするだけの望ましい効果をもたらすのではなく、モバイルcssがデスクトップcssに「追加」するだけであることがわかりました。たとえば、mobile.cssで背景色を赤にするという単一のルールがあると、背景が赤のフォーマットされていないWebコンテンツが表示されるだけでなく、デスクトップのcssが赤の背景でレンダリングされます。

空白のcssファイルを使用して、モバイルでサイトの優れた機能ビューを最初から完全に構築したいのですが、サイトをデスクトップに適したものにするために行った多くの調整を手動で元に戻す必要はありません。 。特に、モバイルでサイトが正しい比率でレンダリングされるのを妨げるいくつかの漂遊デスクトップcssの可能性を排除できるようにしたいと思います。

何かご意見は？

4

6 に答える 6

3 
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />

<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
于 2012-08-03T17:57:41.487 に答える
1

デスクトップを対象とするメディアクエリでデスクトップCSSをラップします

于 2012-08-03T17:55:28.913 に答える
0

「画面のみと（max-device-width：800px）」をリンクするか、css「@media@...」に組み込むか

モバイルが「デスクトップ」スタイルをまったく認識しないようにするには、「デスクトップ」スタイルをエンベロープする必要があります。

だから基本的に

only screen and (max-device-width: 800px) - for your mobile devices

と

only screen and (min-width: 801px) - for desktops
于 2012-08-03T18:07:03.013 に答える
0

次のような条件付きの方法でメディアクエリを使用します。

@media screen and (max-width: 800px) {
  <link to mobile stylesheet
}

@media screean and (min-width: 801px) {
  <link to full stylesheet
}
于 2012-08-03T17:56:21.277 に答える
0

すべてのプラットフォームで「@mediascreen」が使用されるため、メディアタイプだけでは信頼性の高いデバイス検出を実行できないことに注意してください。最も一般的には、デバイス幅を使用して、クライアントがどのタイプのデバイスになるかについて知識に基づいた推測を行うのに役立ちます。

DPIが高いデバイスは通常、小さいふりをしているため、iPhone3GSとiPhone4（たとえば）の両方を同じクエリセットと照合できます。

于 2012-08-03T18:01:33.347 に答える
-1

モバイル関連のものを最後に置く場合は、モバイルスタイルシートの上部にCSSリセットを追加できます。

于 2012-08-03T17:57:26.407 に答える