【问题标题】:Use calc function in CSS in JS in React component在 React 组件中的 JS 中使用 CSS 中的 calc 函数
【发布时间】:2019-05-04 00:53:10
【问题描述】:

我正在开发一个需要在样式中使用 calc 函数的 react 组件

const styles = {
  spotImg:{
    maxWidth:"100%",
    maxHeight:"100%"
  },
  spotCont:{
    width: /*here want to use calc with screen width*/
  }
}

我想在react js组件的上述样式代码中使用屏幕宽度和calc函数。

【问题讨论】:

  • vw 呢?
  • 我想计算一下屏幕宽度?

标签: css reactjs styles calc


【解决方案1】:
const styles = {
  spotImg:{
    maxWidth:"100%",
    maxHeight:"100%"
  },
  spotCont:{
    width: "calc(100vw)", 
     fallbacks:["-moz-calc(100vw)", 
     "-webkit-calc(100vw)",
     "-o-calc(100vw)
     ]
  }
}

将calc函数放在双引号中,然后就可以使用CSS的vw来获取屏幕宽度了。即100vw 为您提供整个屏幕宽度。例如,100vw - 250px 为您提供比屏幕宽度小 250px 的空间。

编辑:根据 OP 关于浏览器不接受计算功能的评论添加了回退。

【讨论】:

  • 当我输入这样的宽度时:"calc(100vw-250px)" 它不被浏览器接受
  • 我猜你的浏览器默认不允许计算,所以你需要后备。我编辑了我的答案以包括后备
  • 注意 calc() 通常需要运算符周围的空格才能工作:“calc(100vw - 250px)”
猜你喜欢
  • 2016-12-13
  • 2016-03-29
  • 2015-02-20
  • 2019-03-29
  • 1970-01-01
  • 2023-01-10
  • 2016-11-07
  • 1970-01-01
  • 2013-08-01
相关资源
最近更新 更多