在屏幕分辨率上调整字体大小

如何在屏幕分辨率上调整字体大小因为我希望文本在屏幕分辨率很小时不超过1行。例如：http://prntscr.com/2qa9ze 在屏幕分辨率上调整字体大小

<div class="centerbreaking"> 
<section id="breaking-news"> 
    <div id="breaking-news-main" class="shadow"> 
     <div id="breaking-news-title">Lajmi i fundit</div> 
     <div id="<?php if ($mobile) { echo "breaking-news-inside-mobile"; } else { echo "breaking-news-inside"; } ?>"> 
      <ul id="breaking-news-list"> 

       <?php $i=0; foreach ($results as $result) : ?> 
    <li><label type="text" name="text<?php echo $i;?>"><?php echo htmlspecialchars($result['text'],ENT_NOQUOTES,'UTF-8');?></label></li> 
        <?php $i = $i+1; 
         endforeach; 
        ?> 
        </ul> 
     </div> 
    </div> 

<script> 
$(function() { 
    $('#breaking-news-inside').vTicker(); 
}); 
</script> 
</section> 
</div>

我的CSS是：

#breaking-news-main { float:left; height:40px; margin:5px 0 0; width:100%; background-color:#96040D; color:#fff; text-transform:uppercase; font-weight:bold; } 
#breaking-news-title { background: url("images/bn_title.png") no-repeat scroll 0 0 transparent;color: #000000;float: left;font-size: 12px;height: 40px;line-height: 40px;padding: 0 0 0 10px;text-transform: uppercase;width: 112px;z-index: 999;} 
#breaking-news-title p {padding:15px 10px;} 
.breaking-news-inside {float: left;height: 40px;line-height: 40px;margin: 0 0 0 5px;padding: 0;width: auto;} 
#breaking-news-list {font-size:15px;}

来源

2014-02-07 SiL3nT

您应该使用媒体查询 –

以及如何使用媒体查询？ :(sry iam新 – SiL3nT

坐落在em或%的font-size（推荐），或者如果你想px它也goint工作...
然后用Media Queries调整您的需求。

例如：

body{font-size:16px} 
#bannerDiv{font-size:1em} 
@media only screen and (max-width: 767px){#bannerDiv{font-size:0.8em}} 
@media only screen and (max-width: 479px){#bannerDiv{font-size:0.6em}}

在这种情况下，#bannerDiv将有1em这是一个在body标签声明16px，当你设置@media与0.6em这0.6份1 ...所以你减少字体从16px到9,6px

希望它有帮助！

延伸阅读：css3-mediaqueries

注意：
这是一个CSS3功能......如果你需要支持旧的浏览器，你需要使用一些javascript来do'it。

来源

2014-02-07 12:37:33 gmo

谢谢你的工作:) – SiL3nT

我建议你设置输入宽度EM而不是PX的。输入的大小将与您字体的大小成比例。您也可以使用css属性text-overflow：ellipsis（与overflow：hidden结合使用），当文字太长时显示“...”。

来源

2014-02-07 12:37:23 djflex68

对于'ellipsis'技巧+ 1 ... ...只是想补充一点，大多数情况下你需要添加'white-space：nowrap'来避免断线（注意'text -overflow：ellipsis'也是一个CSS3功能） – gmo

在屏幕分辨率上调整字体大小

回答

相关问题