Question

我知道我可以调整字体大小，但是我希望它在不同的平台上查看时自动缩小以适应div，例如，它会以不同的方式读取字体大小。

<body>
    <div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png);     background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#000;     text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b>

        <div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>info@blabla.co.za | <strong>Control Centre: </strong>08600-22-blabla</div>
    </div>
</body>

Answer 1

您应该将width as 100%和max-width设置为值（在您的情况下为600px）。

这是一个qucik示例，只是为了向您展示正确的方式，所以现在您可以根据自己的喜好设计样式。

http://jsfiddle.net/08pyzgx4/1/

请记住，对于缩放文字，div应始终具有百分比宽度（如果需要，则偏离最大宽度）

然后只需使用几个媒体查询来调整不同分辨率的文本位置它应该准备好了

Answer 2

你可以这样做....并且不要忘记添加js库。

这是小提琴...... http://jsfiddle.net/f6sx474j/ 尝试增加文本我检查它并正常工作。

<div style="width:600px; 
height:58px;
max-width: 600px;
background-image:url(http://itrace.co.za/images/emailfiles/banner.png); 
background-repeat:no-repeat;
display:block; max-width: 600px;
font-family:Arial, Helvetica, sans-serif; 
font-size:19px; color:#000;     
text-align:center; padding-top:12px;">
<b>Bla Bla Bla Bla Bla Bla </b>
<div id="abc" style="height:16px;
 display: inline-block; 
 max-height:16px; 
 padding-left:88px;
 padding-right:88px; 
 margin-top:18px; 
 font-size:0.6em; 
 letter-spacing:-0.02em;
  position:relative;">
<strong>Website: </strong>www.blabla.co.za |
 <strong>E-mail:   </strong>
 info@blabla.co.za info@blabla.co.za info@b
 <strong>Control Centre: </strong>
 08600-22-blabla</div>
</div>

//这是你的js

<script type="text/javascript">
$(function() {
var div = $('#abc');
var fontSize = parseInt(div.css('font-size'));
do {
    fontSize--;
    div.css('font-size', fontSize.toString() + 'px');
    } while (div.width() >= 400);
   });
 </script>

如何使文本自动缩小以适合div？

2 个答案: