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

时间:2018-12-02 15:29:19

标签: css reactjs styles calc

我正在研究一种React组件,需要在样式中使用calc函数

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

我想在React js组件的上述样式代码中将屏幕宽度与calc函数一起使用。

1 个答案:

答案 0 :(得分:0)

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比屏幕宽度少250像素。

编辑:根据OP关于浏览器不接受calc函数的评论添加了后备。