Question

我希望在CSS中自动缩小字体大小（百分比），具体取决于屏幕的大小。

这样做的目的是控制平台（PC或移动设备）使用的字体大小

这是我的普通css

.pagetitle, .menutitle{
    font:Verdana, Geneva, sans-serif;
    font-size:2em;
    line-height:40px;
    height:40px;
    display:block;
    margin-left:15px;   
 }

感谢。

Answer 1

如果您想区分移动设备和PC，可以使用CSS @media queries，例如：

@media all and (max-width: 767px) {
   // CSS rules for viewport that is narrower than 780px
}

例如：

@media all and (max-width: 767px) {
    .pagetitle, .menutitle {
        font-size: 12px;
    }
}

然而，CSS媒体查询不应仅仅由设备维度决定 - 有时根据您父亲的内容或设计来定制断点更有意义，您可以在其中选择任意宽度发生布局切换。

您可以尝试使用视口单元：vh，vw，vmin和vmax。虽然它们在技术上代表了它们所指的视口测量的百分比，但它们被声明为数值。

例如，如果您的屏幕分辨率为1600 * 768，则使用字体大小：

5vw将为您提供80px-5％的视口宽度
5vh会给你38.4像素（可能通过渲染舍入到38像素）-5％的视口高度
5vmax将为您提供80px-5％的最长尺寸（在这种情况下，水平测量为1600px）
5vmin将为您提供38.4px-5％的较短尺寸（在这种情况下，垂直测量为768px）

请注意，最后两个单位对设备/视口方向敏感：）

Answer 2

设置不同目标分辨率的媒体查询（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。然后，在每个媒体查询中的body {}标记内设置显式字体大小。

Answer 3

text-size-adjust CSS属性允许Web开发人员控制文本膨胀算法是否以及如何应用于应用它的元素的文本内容。这基本上意味着文本将根据屏幕宽度进行调整。以下代码可能会有所帮助：

Formal syntax: none | auto | <percentage>

text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */
text-size-adjust: inherit

有关此内容的更多信息，请访问以下网站：https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

如何编写css来减小字体大小

3 个答案: