0

wordpress サイトがあり、スライダー画像の上にテキストを垂直に浮かせようとしています。

次の CSS を使用して、スライダー ウィジェットに単一の静的な全幅画像をハードコーディングしました。

.slider-wide {
clear: both;
width: 100%;
height: 560px;
    background: url(http://photourl);
background-position: center;
background-repeat: no-repeat;
background-size: cover; 

}

それでは質問です。ワイド画面では文字が綺麗に見えますが、ブラウザのウィンドウを縮小したり、モバイルから閲覧したりすると、文字がスライダー画像からはみ出して他のウィジェットにはみ出してしまいます。

このテキストをスライダー ウィジェットのみに固定する方法はありますか? どういうわけかレスポンシブテキストサイズ？

4

1 に答える 1

0

はい、ビューポート単位を使用する場合、テキストでは「レスポンシブ」テキスト サイズを使用できます。

その種類の単位でサポートされている値の 1 つは、コンテナーの幅、高さ、またはその両方に基づいたパーセンテージ値です...概念のサンプルを次に示します: http://jsfiddle.net/t7b8ytrq/

{
    font-size: 2vh; /* size based on container's height */
    font-size: 2vw; /* size based on container's width */
    font-size: 2vmin; /* size based on witchever is smaller (width or height) */
    font-size: 2vmax; /* size based on witchever is higher (width or height) */
}

ここで仕様について読んでください: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

于 2014-08-25T16:32:58.337 に答える