我正在处理一个react组件，其中我需要在样式中使用calc函数
const styles = {
spotImg:{
maxWidth:"100%",
maxHeight:"100%"
},
spotCont:{
width: /*here want to use calc with screen width*/
}
}
我想在react js组件的上述样式代码中使用带有calc函数的屏幕宽度。
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函数的评论的回退。