问题描述
你好 Stackoverflow 社区。我正在使用当用户单击图片时打开的 react-popupBox。但是,对于大多数移动应用程序,这些框无法正确调整大小。我的代码如下:
Portfolio.js
const openPopupBoxfitnesstracker = () => {
const content = (
<>
<img className="portfolio-image-popupBox" src={fitnesstracker} alt="fitnesstracker"/>
<p>
<br></br>
<br></br>
This app has been created with the intention to be able to view create and track daily workouts. The user will be able to log multiple exercises in a workout on a given day.
The user will also be able to track the name,type,weight,sets,reps,and duration of exercise.
If the exercise is a cardio exercise,the user will be able to track their distance traveled.
<br></br>
Tools: Express,MongoDB,NodeJS,JSON
</p>
<b>Demo: </b> <a className="hyper-link" onClick={() => window.open("https://fitnesstracker808.herokuapp.com/exercise?id=60b84fdcf99be00015ab65f6","_blank")}>https://fitnesstracker808.herokuapp.com/exercise?id=60b84fdcf99be00015ab65f6</a>
<br></br>
<b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/fitnessTracker")}>https://github.com/Rinzler8806/fitnessTracker</a>
</>
)
PopupBoxManager.open({content});
PopupBoxManager.update({
content,config: {
titleBar: {
text: "fitness Tracker",},});
}
const popupBoxConfigfitnesstracker = {
titleBar: {
enable: true,text: "fitness Tracker"
},fadeIn: true,fadeInSpeed: 500
}
CSS
/*POPUPBox*/
.portfolio-image-popupBox {
width: 45rem;
padding: 0 0.5rem;
}
.hyper-link {
cursor: pointer;
color: var(--primary-blue);
}
.hyper-link:hover {
color: var(--primary-purple);
}
/*MEDIA*/
@media(max-width: 768px) {
.portfolio-image-popupBox {
width: 100%;
}
}
@media(max-height: 570px) {
.popupBox-wrapper {
height: 100%;
}
.portfolio-image-popupBox {
width: 50%;
}
}
@media(max-height: 570px) {
.popupBox-content {
height: 100%;
}
.portfolio-image-popupBox {
width: 100%;
}
}
@media(max-height: 280px) {
.popupBox-wrapper {
height: 90%;
}
.portfolio-image-popupBox {
width: 30%;
}
}
不同的媒体样式应该有助于调整大小,但是这些都没有按预期工作,在玩了多种不同的设置后,我也无法让它们按预期工作。我的其余代码可以在下面找到:
https://github.com/Rinzler8806/reactPortfolio/tree/master/src
任何帮助将不胜感激!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)