Question

有没有办法让文本调整大小，因为浏览器的百分比基于液体的设计会变小。

图像div等，所有重新缩放但文本百分比缩放不可能！将其设置为百分比只会更改该文本的统一em设置 - 在每个浏览器宽度中都是相同的。

Answer 1

除了以特定间隔使用媒体查询外，我不太确定。

我会这样做：

.content {
    font-size:16px;
}

@media all and (max-width: 800px) {
    .content {font-size:14px;}
}

@media all and (max-width: 600px) {
    .content {font-size:12px;}
}

@media all and (max-width: 400px) {
    .content {font-size:10px;}
}

没有javascript，纯CSS。

Answer 2

我相信这正是您所寻找的：

http://css-tricks.com/viewport-sized-typography/

Answer 3

是的，可以通过使用JavaScript代码处理onResize事件来调整文本大小。但是onResize存在很多问题，包括 debouncing，这可能会变得复杂。

我知道这不是你问题的一部分，但我想知道调整文本是否是一个好主意。毕竟，用户已经告诉浏览器他/她对当前大小的文本感到满意。覆盖用户的清单偏好是否真的非常友好？

是否可以在浏览器变小时调整文本大小，css

3 个答案: