0

我在调整文本大小时遇到​​问题。我上传图片用于说明目的。 在此处输入图像描述 问题是。大框是父 div，其中有一个包含图像的较小 div（较小的框）。较大的 div 的其余部分应填充文本（红色/粉色线）。文本格式为段落 ( <p> .... </p> <p> .... </p>)，并且文本中有一些链接。

div 的大小是动态的，它们会随着窗口大小的变化而变化。所以我希望改变字体大小以适应主 div。有什么解决办法吗？我真的很感激。

这是我的html代码 

<div id="taust" align="justify">

<img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
<img src="images/A.png" width="auto" height="15%">

<p> text </p>
<p> text </p>
<p> text </p>
<p>text <a href="link" target="_blank">Link</a>!</p>

</div>

这是我的 CSS 代码

@charset "utf-8";
/* CSS Document */

html, body, div, a, p {
}
html { 
    background: url(background/bg_image2_sx.jpg) no-repeat; 
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-size: cover;
    position: relative;
    min-width: 911px;
    min-height: 500px;
    font-size: 100%;
}

body {
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#taust {  
    background-image:url(images/taust.png);
    width: 88%;
    height: 87%;
    position: absolute;
    top: 5%;
    left: 5%;
    min-height:435px;
    min-width:802px;
    border: 1px solid #CCC;
    padding: 1%;
}

@font-face { font-family: riesling; src: url('font/riesling.TTF');
}

a {
    color: #CCC;
    text-decoration: underline;
    font-size:0.95em;
    line-height: 1.4em;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

p {
    line-height: 1.4em;
    font-size: 0.95em;
    color:#CCC;
    margin: 0 0 6px 0;
    font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;
}

#top_foto {
    float: left;
    margin: 0 1.2% 1.2% 0;
    border: solid 1px #CCC;
}
4

3 回答 3

3

您的 div 没有扩展到覆盖所有文本，因为您的位置在 CSS 中设置为绝对。我编辑了下面的 CSS。

#taust {  /* Avalehe taustaks must kast */
    background-color: #CCC;
    width: 88%;
    height: 87%;
    position: relative;
    top: 5%;
    left: 5%;
    border: 1px solid #000000;
    padding: 1%;
}​

如果您希望 DIV 具有特定大小，但又希望将字体限制在其中，则整个站点应使用相对单位，例如百分比。否则，我认为您最终会使用反复试验来尝试找出在任何给定屏幕尺寸下什么尺寸的文本不会流出您的 div。

于 2012-10-13T01:56:53.950 回答
1

This answer from a similar question似乎回答了您的问题：

我不得不自己做这件事。我所做的是为正文设置基本文本大小，并为所有其他大小设置百分比。然后，我使用一个简单的 jQuery 脚本来更改窗口调整大小的基本大小。然后其他尺寸也会更新。我用过这样的东西：

$(function() {
     $(window).bind('resize', function() {
         resizeMe();
     }).trigger('resize');
});

在 resizeMe 函数中，我有这个：

//Standard height, for which the body font size is correct var
preferredHeight = 768;  

var displayHeight = $(window).height(); 
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) > - 1;
$("body").css("font-size", newFontSize);

请参阅：调整窗口大小时自动调整文本大小（字体大小）？

编辑：

要将 jQuery 添加到您的代码中，请执行以下操作：

您必须参考 jQuery 库。通常，您在页面中的结束</body>标记之前执行此操作。index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

这是google托管的，速度最快，体积最小的。您也可以下载该库并将其放入您的 js 文件夹中，并像上面一样引用它，但带有指向您文件的相对链接。

然后，您可以将 jQuery 代码粘贴到上述脚本下方和结束</body>标记上方，它应该可以工作。您还可以将代码放在单独的文件中，并在 index.html 页面的正文部分底部链接到它。

于 2012-10-10T19:03:02.457 回答
0

使用媒体查询动态调整大小，或使用 VH、VW（相对单位），但目前受 Chrome 和 IE9/10 支持。

于 2012-10-10T19:11:36.790 回答