我正在研究一种React组件,需要在样式中使用calc函数
const styles = {
spotImg:{
maxWidth:"100%",
maxHeight:"100%"
},
spotCont:{
width: /*here want to use calc with screen width*/
}
}
我想在React js组件的上述样式代码中将屏幕宽度与calc函数一起使用。
答案 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函数的评论添加了后备。