uniapp怎么写响应式

<template>

        <view class="container">

                <view class="box">响应式布局示例</view>

        </view>

</template>

<script setup>

// ...

</script>

<style scoped>

        /* 基础样式 */

        .container {

                display: flex;

                justify-content: center;

                align-items: center;

                height: 100%;

        }

        .box {

                width: 100%;

                padding: 20px;

                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

                text-align: center;

                font-size: 18px;

                transition: all 0.3s;

        }

        /* 响应式布局 */

        @media screen and (min-width: 320px) {

                .box {

                width: 80%;

                }

        }

        @media screen and (min-width: 768px) {

                .box {

                        width: 60%;

                }

        }

        @media screen and (min-width: 1024px) {

                .box {

                        width: 40%;

                }

        }

</style>