2011-11-11 4 views
1

私は非常に狭い場合、CSSのメディアクエリを使用して私のページの外観を調整しています。簡略化した例では、ページの幅が300ピクセル未満の場合は、背景を青くします。最大幅のCSSメディアクエリはどのようにズームに対応できますか?

@media all and (max-width: 300px) { 
    body{ background-color:blue;} 
} 

私は最近、ユーザーズーム(Ctrlキー+スクロールホイールやChromeレンチ>ズームの)場合は、最大幅は依然として300個の実際のピクセルではなく、300個のズーム画素の中にキックすることをことを発見しました。これにより、より洗練されたレイアウトのサイトが壊れる可能性があります。ズーム幅の広いブラウザを使用しているユーザを処理する最大幅のメディアクエリはありますか?

+1

ブラウザはこれを実装する必要があります(これはFirefoxと同じです)。私はJSを使っていることを除いて、あなた自身がこれをやる方法はないと思います。柔軟なレイアウトを使用してください。あなたが望むよりも少し窮屈になると思っている人もいますが、サイトがまだ使えるものであれば... – Gerben

+2

少し実験した後、ズーム時に "max-width:10em"を使うと動作します。しかし、これはクロムでは機能しません。 Firefoxはうまく動作する(他のブラウザではテストしていない)が、クロムの縫い目がバグアウトする。私はクロムについて何をすべきか分かりますか? – ntkachov

答えて

1

私は実験しましたが、ズームのためにメディアクエリを使用できるようですが、Webkitブラウザではビューポートを定義する必要があります。

+0

実例を共有できますか? – Newtang

+0

確かに[my site](http://ilxr.co)をチェックしてください。ページをズームすると、ビューポートの定義とパーセンテージ幅の使用によって、メディアクエリーが開始されますが、ブラウザは引き続き尊重されます。 –

関連する問題