如何使用 css 使移动应用程序设计在 ionic 中响应

Question

我有 ionic 应用程序，它是用 ionic 构建的。该页面的设计是用 css 设计的，但问题是设计并不是对每个移动设备都有响应。我如何让 id 响应每个移动设备？

<template>
  <IonPage>
    <ion-content :fullscreen="true" id="start" class="background">
      <div id="product_background">
        <Topbar />
        <div class="container">
          <ion-text color class="top-left">
            <h1>ARTICS PRO</h1>
          </ion-text>
           <ion-text color class="heart_icon">
            <ion-icon :icon="heartOutline"></ion-icon>
            <ion-icon :icon="shareSocial"></ion-icon>
          </ion-text>
          <ion-text color class="top-left2">
            <p>Steelseries</p>
          </ion-text>
          <ion-text color class="bottom-right">
            <p>ARTICS 7</p>
          </ion-text>


          <ion-text color class="bottom-right2">
            <p>Steelseries</p>
          </ion-text>


          <img :src="require('@/assets/headset_mockup.png')" style="height:105vw;width:100vw" />
        </div>
        <div slot="bottom" id="product_price">
        <h2>$3,9000</h2>
      </div>

      </div>
      <div id="product_info">
        <p>Product Information</p>
      </div>
      <div id="cart_icon">
         <ion-icon :icon="cart"></ion-icon>
      </div>


    </ion-content>
  </IonPage>
</template>

<script lang="ts">
import { IonContent, IonPage, IonText,IonIcon } from "@ionic/vue";
import Topbar from "../Resources/Topbar.vue";
import { useRouter } from "vue-router";
import { heartOutline,shareSocial,cart } from 'ionicons/icons';
export default {
  name: "Index",
  components: { IonContent, IonPage, Topbar, IonText,IonIcon },
  setup() {
    return {
      router: useRouter(),
      heartOutline,shareSocial,cart
    };
  },
};
</script>
<style scoped>
ion-content.background {
  --background:  url("../../assets/product_background.png") 0 0/100% 93% no-repeat;
}
#product_background {
  background-attachment: fixed;
  background-size: cover;
  padding: 20px;
}
#product_price {
  position: absolute;
  bottom: 60px;
}

.bottom-right {
  position: absolute;
  bottom: 14px;
  right: 16px;
}
.bottom-right2 {
  position: absolute;
  bottom: 0px;
  right: 16px;
}
#product_info{
  position: absolute;
  bottom: 60px;
  left: 16px;
}
#cart_icon {
  position: absolute;
 bottom: 70px;
  right: 50px;
}
#product_price{
    position: absolute;
 bottom: 150px;
  left: 20px;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.heart_icon{
   position: absolute;
  top: 180px;
  left: 8px;
}
.top-left {
  position: absolute;
  top: 16px;
  left: 8px;
}
.top-left2 {
  position: absolute;
  top: 45px;
  left: 6px;
}
</style>

可能是因为我使用了 html 元素而不是 ionic 组件，但那是在 ionic 中替换 html 标签的原因

Answer 1

Ionic 提供了一个网格来使您的 html 响应。您需要使用 ion-grid、ion-row 和 ion-col。 可以使用 size-xs/sm/xl/lg 和 offset 选项修改 ion-col 的大小。这将根据屏幕大小进行调整。

你认为屏幕是 12 个方块，你选择 ion-col 需要多少方块。

更多信息：https://ionicframework.com/docs/api/grid 和 https://ionicframework.com/docs/api/col

<ion-content >
<ion-grid>
<ion-row>
  <ion-col size-sm="6">
    <ion-item>Some stuff</ion-item>
  </ion-col>
  <ion-col size-sm="6">
    <ion-item>Some other stuff</ion-item>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
    <ion-card size-sm="8" offset-sm="2">
      <ion-card-title>Stuff again</ion-card-title>
    </ion-card>
  </ion-col>
</ion-row>



</ion-grid>

</ion-content>