Question

我在调整文本大小时遇到问题。我上传图片是为了说明目的。 enter image description here 问题是。大框是父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;
}

Answer 1

您的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之外没有大小的文本。

Answer 2

来自类似问题的答案似乎回答了你的问题：

我必须自己做。我做的是我设置了基本文本大小用于身体，以及所有其他尺寸的百分比。然后我用了一个简单的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);

请参阅：auto resize text (font size) when resizing window?

编辑：

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

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

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

这是由谷歌主办的，这是最快和最小的。您也可以下载该库并放入您的js文件夹，并按照上面相同的方式引用它，但使用相应的文件链接。

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

Answer 3

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

我无法调整文本大小

3 个答案: