css - 离子应用程序没有响应需要scss中的帮助
问题描述
我已经完成了克隆 willyourather 的应用程序。我有一个问题,它在三星正常尺寸的设备上工作正常。但是在更大屏幕的手机中,如果有人可以帮助它在每台设备上都做出响应,那么它不会响应吗?如果有人可以提供帮助,我知道只需要更改一些 CSS 吗?谢谢
html
<ion-navbar color="grey" center>
<ion-title >Would You Rather ?</ion-title>
<ion-buttons class="bttn" right><button right class="bttn" (click)="presentPrompt()"> <ion-icon color="light" name="md-more"></ion-icon></button></ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="background">
<ion-slides *ngIf="questions" #slides (ionSlideDidChange)="slideChanged()" class="slidee">
<ion-slide *ngFor="let question of questions | async; let i = index;" >
<!-- <div class="orca">
this is for or round
</div> -->
<!-- <h3>Question {{i+1}}</h3> -->
<div class="quizcontainer" >
<div class="upper" text-center (click)="show(question.ckc)" (click)="clickedButton(1,question.would)" >
<p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage1 }}% </p>
<div class="another"><p class="q1" style="text-align: center;">{{question.would}}</p> </div>
</div>
<div class="or" style="color: white" ><p class="pp">OR </p></div>
<div class="down" text-center (click)="show(question.ckc)" (click)="clickedButton(2,question.rather)" >
<p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage2 }}% </p>
<div class="another"> <p class="q1" >{{question.rather}}</p></div>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-content>
scss
page-newp {
ion-icon {
font-size: 40px; //Preferred size here
}
.bttn{
background-color: transparent; // <===== For change the icon background color //
}
ion-title {
text-align: center;
font-family: "Comic Sans MS" !important;
font-weight: 650 !important;
}
.upper{ // <==== Red Box / uppwer box class //
position: relative;
background-color: red !important; // <===== For change the red color //
height: 50% !important;
color: white;
justify-content: center;
align-items: center;
}
.background {
background-color: #383838; //<==== For change the Background color //
}
.pp {
text-align: center;
font-family: "Comic Sans MS" !important;
font-weight: 500;
font-size:22px;
}
.or{
margin-top: -15px;
position: relative;
height: 0%;
height: 0.2%;
}
.down{ //<==== Blue Box / lower box class //
position: relative;
margin-top: 33px;
width: 100%;
background-color: blue !important; // <===== For change the blue color //
height: 60% !important;
color: white;
justify-content: center;
align-items: center;
}
.another { //<===== Question postion //
position: absolute;
text-align: center;
width: 100%;
top: 30px;
}
.slidee {
margin-top: -30px !important;
}
.q1{
text-align: center !important;
font-family: Comic Sans MS !important; font-size: 25px !important; text-align: center;
}
.p1{
position: absolute;
margin-left: 300px;
font-family: Comic Sans MS !important;
font-size: 23px !important;
}
ion-item{
background-color: transparent !important;
}
.quizcontainer{
height: 520px;
widhth: 100%;
}
h1{
color: white !important;
}
/* .orca{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
margin-top: 60%;
margin-left: auto;
border-radius: 50%;
} */
}
这是网络上的 iphonex
解决方案
使用具有不同设备端口大小的媒体查询,以便可以在不同的屏幕上呈现
推荐阅读
- twitter-bootstrap - Bootstrap 将两行宽列折叠成一行
- matplotlib - 将字体更改为 avant Matplotlib
- python - Geany IDE:“没有名为 matplotlib 的模块”
- python - 如何创建具有动态步数的有限状态机
- python - 在训练和预测过程中,我应该如何处理神经网络中的可变样本长度?
- swiftui - 从一个列表到第二个列表
- python - 如何在 tensorflow 2.0 中使用额外输入进行自定义损失
- javascript - 如何在 SocketIO 中获取 Socket 对象的 'id' 属性?
- c++ - 如何为类型列表谓词创建 C++20 概念?
- json - 过滤对象或数组