文本随浏览器调整大小

Question

我刚接触网站开发，所以对此并不了解。

基本上，我想做的是，当浏览器窗口缩小时，将固定位置的文本缩小。有人建议我使用媒体查询，但根据我所读到的（可能是错误的），它们与设备屏幕大小有关，而不是浏览器窗口的大小。

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

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

感谢任何帮助。

- k.s

---

调整文本大小并不是一个好主意，请了解更多关于HTML和换行标签的知识。请查看此链接 - https://dev59.com/JnM_5IYBdhLWcg3wUxdB - Guy P

Answer 1

您可以使用浏览器的宽度：

“width”媒体功能描述了输出设备目标显示区域的宽度。对于连续媒体，这是视口的宽度（如CSS2第9.1.1节所述[CAS21]），包括呈现滚动条的大小（如果有）。请注意，这与“device-width”不同： “device-width”媒体功能描述了输出设备的呈现表面的宽度。对于连续媒体，这是屏幕的宽度。 http://www.w3.org/TR/css3-mediaqueries/ §4.1

---

示例

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

• 简单
• 包含position:fixed内容（按照问题描述）

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

- Tim M.

---

它仍然不起作用（虽然这可能是因为我做错了什么）。我真的很困惑。我使用％值设置了我的宽度属性，当我修改浏览器的宽度时，一切都会重新调整。即使高度输入为％，但当我修改高度时，什么也不会发生。我可以通过将“min-width”替换为“min-height”来使用上面的媒体查询代码吗？因为我尝试过这样做，但没有成功。虽然我突然想到，也许我需要在HTML或样式表中放置一些东西才能使代码起作用？ - k.s

@k.s - 你能否创建一个 JSFiddle，展示一下你尝试过的以及哪些部分没有起作用？ - Tim M.