如何使文本大小在div內響應？

我試圖製作一個響應式wordpress主題，而且我遇到了標題文本沒有響應的麻煩。如何使文本大小在div內響應？

當我嘗試不同的屏幕尺寸時，標題文本最終會走出頁眉，我不想那樣。我希望它保留在標題div內，而不管屏幕大小。

我的頭：

<div id="header"> 

    <div id="titlebox"> 
    <p class="blogtitle"><?php echo get_bloginfo ('name'); ?></p> 
    <p class="tagline"><?php echo get_bloginfo ('description'); ?></p> 
    </div> 

    <div id="searchbox"><?php get_search_form(); ?> </div> 

</div>

的CSS：

#header { 
    width: 100%; 
    height: 23.2%; 
    margin-top: 2.1%; 
    margin-bottom: 2.1%; 
} 
#titlebox { 
    width: 60%; 
    float: left; 
} 
.blogtitle { 
    font-style: normal; 
    text-shadow: 2px 2px #a2a2a2; 
    font-size: 3em; 
    padding-top: 2.1%; 
    padding-right: 2.1%; 
    padding-bottom: 0; 
    padding-left: 2.1%; 
} 
.tagline { 
    font-style: italic; 
    text-shadow: 1px 1px #a2a2a2; 
    font-size: 0.75em; 
    padding-top: 0; 
    padding-right: 2.1%; 
    padding-bottom: 2.1%; 
    padding-left: 2.1%; 
} 
#searchbox { 
    width: 40%; 
    float: right; 
}

來源

2014-09-28 ynef

在較小的寬度，你的文字是太大，因此它溢出。您需要使用media queries，以便在寬度低於某個點時縮小字體大小。

例如爲：

@media all and (max-width: 767px) { 
    .blogtitle { 
    font-size: 2em; 
    } 
} 
@media all and (max-width: 500px) { 
    .blogtitle { 
    font-size: 1em; 
    } 
}

而要回答最後一個問題，創造性的響應式設計是遠遠超過了我可以在這裏回答。而不是隨意選擇更改字體大小的斷點，請使用Chrome響應式檢查器插件之類的內容。它會告訴你什麼響應斷點已經在你的主題中使用。最好嘗試和匹配這些。這樣，您的更改將與相同斷點處主題中的任何其他更改相匹配。

也就是說，對於所有寬度最大爲767的寬度，請爲.blogtitle類2em而不是默認3em製作字體大小。

來源

2014-09-29 04:07:04 manishie

它的工作原理！但是，如果我想讓字體大小更小，例如1em的字體在500px以下時，我是否必須使用單獨的媒體查詢？ – ynef 2014-09-29 08:09:47

還有一個簡單的方法可以找出你需要使用的最大寬度px，而不是通過反覆試驗來實現嗎？ – ynef 2014-09-29 08:43:18

查看更新的答案。是的，你可以擁有儘可能多的媒體查詢。 – manishie 2014-09-29 14:52:46

這對我的作品

.resposive_text { 
    font-size: 30px; 
    font-weight: 600; 
    /*here put anything you want for desktop size*/ 
} 

@media (max-width: 500px) { 
    .resposive_text { 
     font-size: 18px; 
     /*here put anything you want for mobile size*/ 
    } 

}

而且在我的div

<div class="resposive_text"> 
    <p>Bienvenidos a ENL Team Peru</p> 
</div>

HTH

來源

2017-03-12 01:10:32 JRichardsz

如何使文本大小在div內響應？

回答

相關問題