html - 用户从 HTML 编辑器输入的响应字体大小

Question

我有一个 HTML 编辑器，用户可以使用它来输入一些内容。他们还可以在那里更改字体大小。所以现在生成的 HTML 类似于 -

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

我必须在所有设备上显示它。我怎样才能让它响应？

我可以从 pt 更改字体大小选项其他任何事情。我知道 vw等等，但问题是旧版浏览器和一些移动浏览器不支持它。

Answer 1

一种解决方案是将测量单位更改为 em然后使用媒体查询针对特定设备类型，为每个设备更改父设备上的相对字体大小。

(em) represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. This unit is often used to create scalable layouts.

例如，假设您的 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 ):

/* 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;
   }
}