0

背景画像がビューポートのサイズに合わせて拡大縮小されるようにしました。ここで、テキストを背景画像に対して拡大縮小します。注:<img>背景画像にタグを使用しているのは、これにより小さなブラウザー ウィンドウ (つまり、モバイル デバイス) でのスケーリングが可能になるためです。

CSS

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    top: 0px;
    width: 781;
    height: 758;
    border: 1px solid black
    z-index: 2;
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    z-index: 2;
}   

p
{
    font: 14px Georgia;
    color: #FFFFFF;
}

HTML

<img class="bg" src="background.jpg">

<div id="container">
<div id="left">
    <p>Text</p>
</div>
</div>
4

2 に答える 2

0

すべてのテキストを実行していますか、それとも見出しだけを実行していますか？「Fittex」または「Bigtext」を調べることをお勧めします。

CSSとメディアクエリを厳密に使用してそれを行うことができます。

また、数日前にここで別の方法を見ました。これは、CSSを使用し、メディアクエリを使用せずに厳密に実行する誰かの方法です。

この投稿もチェックしてください： ブラウザの幅に基づいてテキストサイズを動的にスケーリングすることは可能ですか？

于 2012-07-18T16:05:33.473 に答える
0

私の知る限り、css だけではこの方法でテキストを動的にスケーリングすることはできません。

このようなものを使用して、選択したフォントサイズをwindow.innerWidthに比例させると、jQueryでそれを実行できる場合があります。

function resizeText(event) {
       //your text element
       var $text = $('h2');

       if(window.innerWidth <= 781){

           //font scaling ratio
           var  fontSize = window.innerWidth/100;             
           $text.css('font-size', fontSize+'px');   

       } else {
           $text.css('');
       }
}

  //run above on window load and resize events
  window.onresize = resizeText;
  window.onload = resizeText;
于 2012-07-18T15:39:06.817 に答える