在屏幕分辨率上調整字體大小

如何在屏幕分辨率上調整字體大小因爲我希望文本在屏幕分辨率很小時不超過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

在屏幕分辨率上調整字體大小

回答

相關問題