2011-04-25 7 views
2

スクリーン幅が320px未満で、すべてではないデバイスにのみCSSを書き込む方法はありますか?画面幅が300px未満で、すべてではないデバイスにのみCSSを書き込む方法はありますか?

私は

devices with min-width of 300 px { color:red} 
devices with max-width of 299 px { color:blue} 

そして、どのように両方の条件に風景モードを制御するために疑問を説明する

のみの例のようにCSSを書きたいですか?

答えて

0

これはjavascriptを使用して行うことができます。

if (document.clientWidth < 300) { 
document.getElementById("yourElement").style.color="blue"); 
} else if (document.clientWidth >= 300) { 
document.getElementById("yourElement").style.color="red"); 
} 

などです。

特定のピクセル幅以下であれば、別のスタイルシートを含めることもできます。私はちょうど<head>をJSで修正する方法を正確には分かっていないので、別の答えやgoogleをちょっと待たなければならないでしょう。

2
myselector { color: blue; } 
@media screen and (min-width: 300px) { 
    myselector { 
    color: red; 
    } 
} 

あなたは、デバイスの画面または何か他のビューポートまたはCSSピクセル幅のCSS pxの幅を気にするかどうかに応じて、必要に応じてあなたはこれを調整する必要があるかもしれませんけど。それは疑問からは分かりませんでした。

1

私は、このコードは、フィーチャーフォンおよびいくつかのBlackberry端末上で非常に信頼性がないことがわかります。この場合、サーバー側の幅を取得するのにDevice Atlasを使用します。また、あなたのオリエンテーションのデバイスに応じてCSSを適用することができますが、CSS3メディアクエリ:

@media only screen and (max-width: 299px) { 
    color:blue; 
} 


@media only screen and (min-device-width: 300px) { 
    color:red; 
} 
+0

を私はそれが本当だ古いブラウザメディア画面では動作しません、彼らはハンドヘルド –

+0

をサポートして考えると、サーバー側のコードで画面サイズを取得し、インラインCSSを使用して幅を設定することができます。また、すべてのデバイスに1つのマークアップを使用することは、特に古いデバイスの場合は非常に苦痛です。サポートするデバイスを制限するか、ユーザーエージェントのスニッフィングを行い、それらのデバイスに対して異なるマークアップを提供することができます。 – xanderer

1

それはスクリーンおよび(または最小幅最大幅)ほど有名ではありません。

コード例

@media画面及び(配向:肖像){

/* Portrait styles */ 

}

@media画面と(方向:横){

/* Landscape styles */ 

}

が仕様を参照してください: http://www.w3.org/TR/css3-mediaqueries/#orientation

関連する問題