響應字體大小從HTML編輯器

用戶輸入I具有用於由用戶輸入一些輸入一個HTML編輯器。在那裏他們也可以改變字體大小。所以，現在它生成的HTML是一樣的東西 -響應字體大小從HTML編輯器

<span style="font-size: 10pt">Sample Text</span>

我必須在所有設備上進行顯示。我怎樣才能使這種響應？

我可以從pt字體大小選項更改爲別的。我知道vw等，但問題是，它不是由舊的瀏覽器和一些移動瀏覽器的支持。

來源

2015-01-07 linpar

您尚未定義「響應字體大小」的含義。如果這意味着設置相對於視口寬度或設備顯示寬度的字體大小，則需要說明並指定它應該如何關聯。然後展示你迄今爲止的最大努力（HTML和CSS和JavaScript）並描述你有什麼問題。 –

一種解決方案將是測量單位改變爲em然後使用媒體查詢指定特定的設備類型，對父爲每個改變相對字體大小。

（EM）表示元素的計算的字體大小。如果的font-size屬性本身使用時，它表示該元素的繼承字體大小。這個單位通常用於創建可擴展的佈局。

例如，假設您的HTML編輯器輸出例如

<div id="HTML_Editor"> 
    <span style="font-size: 10pt">Sample Text</span> 
</div>

更改這個輸出例如爲：

<div id="HTML_Editor"> 
    <span style="font-size: 1em">Sample Text</span> 
</div>

然後使用媒體查詢由HTML_Editor元件，例如設置基字體大小來建立在不同設備上em測量（使用Bootstrap's device definitions）：在你的CSS媒體最大寬度

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { 
    #HTML_Editor{ 
     font-size: 10px; 
    } 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { 
    #HTML_Editor{ 
     font-size: 15px; 
    } 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { 
    #HTML_Editor{ 
     font-size: 20px; 
    } 
}

來源

2015-01-07 08:34:05 SW4

使用，並根據屏幕的寬度改變您的字體的大小。例如：

@media (max-width:560px){ 
    #HTML_Editor span{ 
     font-size: 8px 
    } 
}

這只是一個例子。你可以把它放在你的需求。

來源

2015-01-07 08:38:17 vaspant

響應字體大小從HTML編輯器

回答

相關問題