### 标题：**uni-app 屏幕适配全攻略：打造完美视觉体验**
uni-app 是一个使用 Vue.js 开发跨平台应用的框架，它允许开发者编写一次代码，然后发
布到不同的平台，包括 Web、iOS、Android、以及各种小程序平台（如微信/支付宝/百度等
小程序）。uni-app 由 DCloud 公司开发和维护。
主要特点包括：
1. **使用 Vue.js**: uni-app 使用了流行的 Vue.js 框架，让熟悉 Vue 的开发者能够快速上
手。
2. **跨平台**: 一套代码可以编译到多个平台，包括手机 App 和小程序。
3. **组件丰富**: 提供了大量的组件和 API，以适应不同平台的开发需求。
4. **性能优化**: 对于原生 App，uni-app 可以访问和使用原生的能力，以达到更好的性能。
5. **热更新**: 支持热更新，开发者可以快速迭代和修复 bug，无需重新发布应用。
6. **开发工具**: 提供了 HBuilderX IDE，这是一个集成开发环境，支持代码编写、调试和打
包。
7. **社区和生态**: 拥有活跃的开发者社区和丰富的插件生态，方便开发者扩展功能。
使用 uni-app，开发者可以减少为不同平台单独开发的重复工作，提高开发效率。同时，它
也支持调用原生 API，以实现更接近原生体验的功能。
在移动应用开发中，屏幕适配是确保应用在不同设备和屏幕尺寸上都能提供良好用户体验的
关键。uni-app 作为一个使用 Vue.js 进行跨平台开发的框架，提供了灵活的屏幕适配方案。
本文将详细介绍如何在 uni-app 中实现应用的屏幕适配，包括详细的步骤说明和代码示例，
帮助开发者打造适应各种屏幕尺寸的应用。
#### 1. 屏幕适配的基本概念
屏幕适配是指让应用界面能够适应不同分辨率和尺寸的屏幕。
#### 2. uni-app 的屏幕适配机制
uni-app 使用灵活的布局系统和单位，支持百分比、vw/vh（视口宽度/高度）等相对单位。
#### 3. 使用 flex 布局
flex 布局是一种常用的自适应布局方式，可以在 uni-app 中使用。
```html
<template>
<view class="container">
<view class="item" v-for="item in items" :key="item.id">{{ item.name }}</view>
</view>
</template>
<style>
.container {
display: flex;
