レスポンシブなブロックで、フォントサイズ下限リミットを設定する試み
レスポンシブデザインでWEBページを作成する場合、一定のアスペクト比を持ったブロック内に、テキストを記述した場合
px サイズで記述してしまうと、固定サイズなので、スクリーンサイズが小さくなった場合に、テキストがはみ出してしまうといった事が発生します。
レスポンシブデザインでは、テキストのサイズを相対的な単位で書くことが推奨されています。例えば、%やem rem等です。
親ブロックに、フォントサイズを指定して、子要素に%を指定した場合 サイズはそれぞれ指定した値になります。
しかし、単位によって%やemを親ブロックに指定した場合は、それらの更に親要素のサイズの影響を受けてしまい サイズのコントロールがうまくいか無い事が多いのではないでしょうか？
この表示では、ビューポートのサイズからフォントのサイズを決めるvwと、
ルート要素のフォントサイズを参照するremサイズを親ブロックに指定して、該当する要素は、%指定を行っています。
簡単なスタイル指定で、min-font-size(こういう風には書く事は出来ませんが）みたいなフォントサイズの下限を設定出来るのではないかというアイディアです。
centered クラスは、Raindropsテーマのクラスで、flexで中央揃えをするクラスです。詳細は、テーマを参照してください。
青海波
静海波
<div class="responsive-block centered"> <p>青海波</p> <p class="size50percent">静海波</p> </div>
.responsive-block {
position: relative;
padding-bottom: 28.125%;
padding-top: 28.125%;
height: 0;
border:1px solid #ccc;
font-size:5vw;
background-color:silver;
background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;
}
p{
margin:0;
padding:0;
}
.size50percent{
font-size:50%;
}
@media screen and (max-width : 480px){
.responsive-block{
font-size:1.5rem;
}
}