根據顯示器分辨率調整字體大小

我是初學者，無法調整字體大小。當顯示分辨率改變時，文本超出div限制。我想，而不是超越div的限制，文本會根據其餘的佈局來改變決議。根據顯示器分辨率調整字體大小

截圖

HTML：

<div class="sec" id="se"> 

    <div class="title"> 
    </div> 
    <img class="img" src="img/i.jpg"> 
    <div class="secleft"> 
     <div class="txt"> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     </div> 

    </div> 
    <div class="secright"> 
    </div> 
</div>

CSS：

.sec{ 
    position: absolute; 
    height: 50%; 
    width: 100%; 
    background-color: #009fb2; 
    top: 75%; 
} 
.title{ 
    position: absolute; 
    height: 15%; 
    width: 40%; 
    background-color: red; 
    top: 5%; 
    left: 30%; 
} 
.img{ 

    position: relative; 
    width: 16%; 
    left: 42%; 
    top: 28%; 
} 

.secleft{ 
    position: absolute; 
    height: 57%; 
    width: 30%; 
    background-color: #006672; 
    top: 28%; 
    left: 7%; 
    border-radius: 3px; 
} 

.txt{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
}

來源

2017-02-16 Isaac de Araujo Meneses

這是CSS Media Queries的用途。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

您可以使用@media (max-width: 750px) {css here..}

這裏做的事情是它取決於屏幕的寬度，適用不同的CSS。因此，您可以在此塊內應用不同的字體大小，然後僅在屏幕寬度小於750像素時使用。注750僅僅是一個例子，可以設置爲任何你喜歡的。

實施例：

body { 
    font-size: 3em; 
    } 

@media (max-width: 750px) { 
    body { 
    font-size: 1em; 
    } 
}

來源

2017-02-16 15:06:30

不要使用像素進行字體大小調整。改爲使用em或rem。 –

謝謝，完全忘了。改變了它。 –

-3

設置字體大小與下面的CSS：

font-size: 1vw;

來源

2017-02-16 14:58:17 jwetzel

不要這樣做...... –

您應該使用em's或rem來代替字體大小，並使用媒體查詢更改其大小 –

單位em是相對於它的父。使用媒體查詢定義多個斷點並更改父級的字體大小，並且子級將相對於其父級縮小。

例如：https://jsfiddle.net/jpa1fab8/

正如你可以看到相對於其容器的字體大小的變化。 將在的jsfiddle分頻器使容器小

所以：定義font-size爲em和使用@media基於某些breakpoints改變font-size。這些是斷點Bootstrap CSS使用：https://v4-alpha.getbootstrap.com/layout/overview/

來源

2017-02-16 15:18:13

根據顯示器分辨率調整字體大小

回答

相關問題