在 React 组件的 JS 中使用 CSS 中的 calc 函数

Question

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

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

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

Answer 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 关于浏览器不接受计算功能的评论添加了回退。

在 React 组件的 JS 中使用 CSS 中的 calc 函数

Use calc function in CSS in JS in React component

css

styles

calc

reactjs