math - CSS3算術

Question

私はCSS3をかなり最近使用して学習し、その多くの機能を楽しんでいます。今のところ、ブロック要素の幅を条件付きで割り当てるCSSルールを設定できるかどうか疑問に思っています。私が求めているのは、画面幅がたとえば500px未満の場合は、320pxの幅を使用することです。それ以外の場合は、画面サイズのたとえば80％の幅を使用します。

はい、私はJavaScriptを介してこの種のことを行うことができることを認識しています-もっとエレガントなCSS3アプローチがないかどうか疑問に思っています。

Answer 1

@media only screen and (max-width: 500px) {
    // CSS rules go here
}

@media only screen and (min-width: 501px) and (max-width: 959px) {
    // CSS rules go here
}

@media only screen and (min-width: 960px) {
    // CSS rules go here
}

etc...

W3Cから

Answer 2

はい、CSSメディアクエリを使用することは非常に可能です-http ://www.css3.info/preview/media-queries/

.mydiv {
    width: 80%; /* normal case */    
}

/* special case if screen width < 500 */
@media all and (max-width: 500px) {
    .mydiv {
        width: 320px;
    }
}