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

据我所知，您不能仅使用 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 回答
0

你是在做所有的文字还是只是标题？您可能想查看“Fittex”或“Bigtext”。

您可以严格使用 CSS 和媒体查询来做到这一点。

几天前，我还在这里看到了另一种方法，有人的方法是严格使用 CSS 而没有媒体查询。

另请查看这篇文章： 是否可以根据浏览器宽度动态缩放文本大小？

于 2012-07-18T16:05:33.473 回答