Question

我有一个HTML编辑器，供用户用来输入一些输入。在那里他们也可以改变字体大小。所以现在生成的HTML就像 -

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

我必须在所有设备上显示它。我怎样才能做出这种反应？

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

Answer 1

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

（em）表示元素的计算字体大小。如果使用 font-size属性本身，它表示继承的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>

然后，通过在em元素上设置基本字体大小，例如，使用媒体查询在不同设备上建立HTML_Editor测量值。（使用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;
   }
}

Answer 2

在css media max-width中使用，并根据屏幕的宽度更改字体的大小。例如：

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

这只是一个例子。您可以根据自己的需要进行调整。

来自HTML编辑器的用户输入的响应字体大小

2 个答案: