响应式
响应式解决方案（Responsive Design）是为了使网站或应用程序能够适应不同设备的屏幕大小和分辨率，提供一致、优化的用户体验的设计方法。它通过 CSS 的灵活布局、媒体查询和可伸缩的图像等技术，确保在手机、平板、桌面等不同设备上都能正常显示。
技术方案
方案一
新建 media.scss 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| $breakpoints: (
'phone': ( // 手机端
320px,
480px,
),
'pad': ( // ipad
481px,
768px,
),
'notebook': ( // 笔记本
769px,
1024px,
),
'desktop': ( // 电脑
1025px,
1200px,
),
'tv': 1021px, // 电视
);
@mixin respond-to($breakname) {
$bp: map-get($breakpoints, $breakname);
@if type-of($bp) == 'list' {
$min: $nth($bp, 1);
$max: $nth($bp, 2);
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else {
@media (min-width: $bp) {
@content;
}
}
}
|
viteconfig.ts：
1
2
3
4
5
6
7
8
9
| {
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/scss/media.scss";`,
},
},
},
}
|
列子：
1
2
3
4
5
6
| <template>
<div class="home-page">
</div>
</template>
|
1
2
3
4
5
6
7
8
9
10
| .home-page {
height: 200px;
@include respond-to('desktop') {
background: red;
}
@include respond-to('mobile') {
background: blue;
}
}
</style>
|
方案二
pnpm下载 tailwindcss，文档
新建 tailwind.config 文件：
1
2
3
4
5
6
7
8
9
10
11
12
| module.exports = {
theme: {
extend: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
},
},
},
}
|
列子：
1
2
3
4
5
| <div class="bg-blue-500 sm:bg-green-500 lg:bg-red-500">
</div>
|
