Question

我已经完成了将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

Answer 1

使用具有不同设备端口大小的媒体查询，以便可以在不同屏幕上呈现

离子应用程序无响应需要在CSS中提供帮助

1 个答案: