当前位置:首页 > 文章列表 > 文章 > 前端 > CSS中calc与min函数嵌套使用时为什么报错?

CSS中calc与min函数嵌套使用时为什么报错?

2024-10-31 18:25:01 0浏览 收藏

最近发现不少小伙伴都对文章很感兴趣,所以今天继续给大家介绍文章相关的知识,本文《CSS中calc与min函数嵌套使用时为什么报错?》主要内容涉及到等等知识点,希望能帮到你!当然如果阅读本文时存在不同想法,可以在评论中表达,但是请勿使用过激的措辞~

CSS中calc与min函数嵌套使用时为什么报错?

calc与min函数嵌套使用时报错

在css中使用calc和min函数嵌套时可能遇到错误。例如,以下代码会报错:

font-size: calc(
  min(min(calc(100vw / 1920px), calc(100vh / 1080px)), 078125) * 100px
);

错误的原因有两个:

  1. 078125是什么?
    像素和数值不可比较。在此处,"078125"是一个数值,而其他参与min函数的参数都是像素值。
  2. min函数嵌套无效
    min函数内不能再嵌套min函数。

为了解决这些错误,可以将代码修改为:

font-size: calc(
  min(min(calc(100vw / 1920px), calc(100vh / 1080px)), 78125px) * 100
);

其中:

  • 将"078125"修改为"78125px",使其与其他参与min函数的参数单位一致。
  • 去掉了min函数的嵌套。

需要注意的是,改动后的代码可能并不是题主预期的效果。

好了,本文到此结束,带大家了解了《CSS中calc与min函数嵌套使用时为什么报错?》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!

沃格光电:控股股东、实控人拟转让5.30%公司股份沃格光电:控股股东、实控人拟转让5.30%公司股份
上一篇
沃格光电:控股股东、实控人拟转让5.30%公司股份
SCSS 嵌套元素中的属性继承:为什么子元素会继承父元素的 `position: absolute`?
下一篇
SCSS 嵌套元素中的属性继承:为什么子元素会继承父元素的 `position: absolute`?
查看更多
最新文章
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im">
文章 · 前端   |  5小时前  |  
图片
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im">CSS图片上叠加文字的实现方法,主要通过使用伪元素(如 ::after)来在图片上方添加内容。以下是详细步骤和示例代码:1. HTML 结构假设你有一个包含图片的容器,结构如下:
图片
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im
318浏览 收藏
查看更多
课程推荐
查看更多
AI推荐
查看更多
相关文章
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码