3

私は.cssClass含まれています：

// fallback without calc
width: 60%; 
@media (max-width: 500px) { width: 58%; }
@media (max-width: 460px) { width: 55%; }
@media (max-width: 420px) { width: 50%; }
@media (max-width: 380px) { width: 45%; }
@media (max-width: 340px) { width: 40%; }
// using calc
width: -webkit-calc(70% - (34px + 1.12em));
width: -moz-calc(70% - (34px + 1.12em));
width: -ms-calc(70% - (34px + 1.12em));
width: -o-calc(70% - (34px + 1.12em));
width: calc(70% - (34px + 1.12em));

したがって、ブラウザが をサポートしている場合はcalc、以前に定義された幅 (60%) を置き換えて、このcalcアプローチを使用します。

ただし、サイズ変更時にまだメディアクエリを使用しており、計算値をクエリ値に置き換えています。

calc をサポートしていないブラウザでは良い結果が得られます。これは、そのすべてを省略しているためですが、calc をサポートしているブラウザでは、フォールバック クエリと混合された calc の結果が得られます。

私は何をすべきか？calc がサポートされていない場合にのみ、メディアクエリを実行したいのです。

JavaScript を使用しないソリューションまたは別のアプローチを探しています。

4

1 に答える 1

3

SASS は、ネストされたプロパティを並べ替えて、メディア クエリが最後になるようにします。

何が起こるかのいくつかの例を次に示します。

SCSS 

body {
    background: #000000; //black

    @media (max-width: 500px) { 
        background: #990000; //red
    }

    background: #000099; //blue

    @media (max-width: 300px) { 
        background: #009900; //green
    }
}

出力CSS 

body {
    background:#000;
    background:#009
}
@media (max-width: 500px) {
    body {
        background:#900
    }
}
@media (max-width: 300px) {
    body {
        background:#090
    }
}

デモ

できることは、ソート順を操作するために 2 番目のネストに入れることです。

SCSS

body {
    background: #000000; //black

    @media (max-width: 500px) { 
        background: #990000; //red
    }


}
body {
    background: #000099; //blue

    @media (max-width: 300px) { 
        background: #009900; //green
    }
}

出力CSS

body {
    background:#000
}
@media (max-width: 500px) {
    body {
        background:#900
    }
}
body {
    background:#009
}
@media (max-width: 300px) {
    body {
        background:#090
    }
}

デモ

したがって、コードでこれを行うことができ、正しい順序でソートする必要があります。

SCSS

.cssClass {
    // fallback without calc
    width: 60%; 
    @media (max-width: 500px) { width: 58%; }
    @media (max-width: 460px) { width: 55%; }
    @media (max-width: 420px) { width: 50%; }
    @media (max-width: 380px) { width: 45%; }
    @media (max-width: 340px) { width: 40%; }
}
.cssClass {
    // using calc
    width: -webkit-calc(70% - (34px + 1.12em));
    width: -moz-calc(70% - (34px + 1.12em));
    width: -ms-calc(70% - (34px + 1.12em));
    width: -o-calc(70% - (34px + 1.12em));
    width: calc(70% - (34px + 1.12em));
}
于 2012-12-10T04:13:44.593 に答える