如何解决将 CSS 百分比宽度指定为视口宽度的函数
我的网页上有一些文本段落,我想对其进行格式化以占据页面宽度的特定百分比。我决定当页面宽度为 800px 时,文本应该占据页面宽度的 80%,当页面宽度为 1440px 时,文本应该占据页面宽度的 40%。然而,问题是我希望不同宽度之间有一个平滑的过渡,这意味着在 1120 像素宽时,文本将占据页面宽度的 60%。本质上,我想定义一个表达式,将当前宽度作为像素值,对数值进行运算,然后将数值输出转换为某个百分比。有没有办法只在 CSS 中实现这个?我知道使用 Javascript 是可能的,但我想在我的设计中使用更多纯 CSS。
编辑:如果我要将其实现到 JavaScript 中,我会使用类似于以下内容的内容:
window.onresize = () => {
let currentWidth = window.innerWidth
let newTextBoxWidth = 130 - (currentWidth / 16)
textBox.style.width = Math.max(40,Math.min(newTextBoxWidth,80)) + “%”
}
这允许符合给定规格的值的平滑连续体,而不是在百分比值之间跳跃的解决方案。
解决方法
您要求的内容可通过 vw
(视口宽度)和 media queries 获得。
p {
transition: width 0.4s ease-in-out;
width: 80vw;
}
@media screen and (min-width: 1120px) {
p { width: 60vw; }
}
@media screen and (min-width: 1440px) {
p { width: 40vw; }
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。