浏览器调整大小时调整文本大小

Question

我对整个 Web 开发这件事只是新手，所以我没有太多知识。

基本上我想要做的是在浏览器窗口变小时将固定定位的文本变小。我收到了一些媒体查询建议，但从我读到的内容（虽然可能是错误的），它们与设备屏幕大小有关，而不是与正在调整浏览器窗口大小有关。

我想使用固定定位，因为我不希望文本与页面的其余部分一起滚动，但是当浏览器窗口大小减小时，我需要更改文本大小。目前，当我调整浏览器窗口的大小时，一些文本会从屏幕上消失。我尝试在我的 CSS 样式表中输入 % height 属性，但没有帮助。

到目前为止，我只使用了 CSS 和 HTML

任何帮助表示赞赏

Answer 1

可以使用浏览器的宽度：

“宽度”媒体功能描述了目标显示的宽度 输出设备的区域。对于连续介质，这是 视口（如 CSS2 第 9.1.1 节 [CSS21] 所述）包括 渲染滚动条的大小（如果有）。

http://www.w3.org/TR/css3-mediaqueries/ §4.1

请注意，这与device-width 不同：

“设备宽度”媒体功能描述了渲染的宽度 输出设备的表面。对于连续介质，这是宽度 屏幕。

---

示例

（来回调整预览窗格的大小）。

• simple
• inclusion of position:fixed content（根据问题）

<div class="resize">hello world</div>

@media all and (min-width: 400px) {
    .resize {
        font-size: 14px;
    }
}
@media all and (min-width: 600px) {
    .resize {
        font-size: 32px;
    }
}

---

• 另见：http://css-tricks.com/css-media-queries/