如何使用css使移动应用程序dsign在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元素而不是离子成分，但那是离子中html标签的替代品

Answer 1

Ionic提供了一个网格，使您的html能够响应。你需要使用离子栅格、离子行和离子列。离子柱的大小可以通过大小xs/sm/xl/lg和偏移选项进行修改。这将根据屏幕的大小进行调整。

你认为屏幕是12个区块，你可以选择你所在的国家要走多少个区块。

更多信息：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>