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

Question

我只是整个网络开发的新手，所以我没有太多知识。

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

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

到目前为止我只用过 CSS 和 HTML

感谢任何帮助

Answer 1

可以使用浏览器的宽度:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

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

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

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen.

---

例子

(来回调整预览 Pane 的大小)。

• 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/