1つの値で最大値と最小値を決定する

Question

CSS 'calc()関数をビューポートサイズとともに使用して、プロパティの最大値と最小値を決定することは可能ですか？

私はある種の最大値または最小値を取得することができましたが、特定の値については両方を取得できませんでした。ここでは、の最小値をfont-sizeプロパティに設定する方法を示します。

.selector { 
    font-size: calc(32px + 2vw); 
} 

は残念ながら巨大な解像度でフォントサイズが予想ほどきれいになりません、何にも莫大になります。逆に最大サイズを設定する場合。だから私は、プロパティの最大値と最小値の両方を設定するのに役立つ解決策を探しているのです。

上記のコードは、実際には私が欲しいものにかなり近いですが、皆さんがよりよいアプローチを見つけたかどうかを知りたいと思います。主な目的は、「セレクタ」をラップのサイズの1/4にすることです。サイズは小さく、大きな解像度で行います。ラッパー、以下の性質を有するものをセレクタ要素の親要素考えてみましょう：あなたはメディアクエリでビューポートを設定する必要が

.wrapper { 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 40px; 
    max-width: 1200px; 
    box-sizing: border-box; 
} 

Answer 1

を、残念ながらMAX-フォントサイズを設定するための自動化さ方法はありません。

.selector { 
    font-size: calc(32px + 2vw); 
} 



@media (min-width: 900px) { 
    .selector { 
     font-size: 70px; 
    } 
} 

@media (max-width: 400px) { 
    .selector { 
     font-size: 40px; 
    } 
}