在過去的幾篇文章中，我們從前端 CRUD 介面、訂單狀態機設計，到儀表板的數據視覺化，逐步構建了 POS 系統的各項核心功能。這些功能在桌面環境下運作良好，但現代應用程式的用戶不再局限於單一設備。
銷售系統可能需要在傳統的收銀機螢幕、平板電腦，甚至在某些情況下，店員的手機上進行操作。這就引出了一個關鍵的設計挑戰：如何讓我們的系統在不同尺寸、不同類型的裝置上都能提供一致且優質的使用者體驗？
答案就是「響應式設計 (Responsive Design)」。今天，我們將深入探討響應式設計的核心概念、在 POS 系統中的應用考量，實作多裝置適配的介面。響應式設計不僅僅是讓頁面「看起來」不錯，更是提升使用者體驗和系統可用性的關鍵。
響應式設計是一套讓網頁能夠根據使用者設備的螢幕尺寸、解析度、方向（橫向或縱向）等特性，自動調整佈局和內容的設計方法。它的目標是提供「一次設計，隨處可用」的體驗，避免為不同設備開發多個獨立版本。
為什麼需要響應式設計？
響應式設計的三大基石：
em、rem、vw (viewport width)、vh (viewport height)。max-width: 100%; height: auto; 實現。對於 POS 系統，響應式設計的考量更為實際，因為它直接影響到店員的操作效率和顧客的結帳體驗：
在我們的 Vue.js 專案中，我們可以利用通用的 CSS 技術來高效地實現響應式設計。
Meta Viewport 標籤：
index.html 的 <head> 中包含以下標籤，指示瀏覽器正確渲染頁面：<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS 媒體查詢 (Media Queries)：
/* 當螢幕寬度小於 768px 時應用 */
@media (max-width: 767px) {
.container {
flex-direction: column; /* 垂直排列 */
}
.sidebar {
display: none; /* 隱藏側邊欄 */
}
}
/* 當螢幕寬度大於等於 768px 且小於 1024px 時應用 */
@media (min-width: 768px) and (max-width: 1023px) {
.container {
grid-template-columns: 1fr 1fr; /* 兩欄佈局 */
}
}
/* 當螢幕寬度大於等於 1024px 時應用 */
@media (min-width: 1024px) {
.container {
grid-template-columns: 1fr 3fr; /* 側邊欄 + 主內容佈局 */
}
}
Flexbox 和 Grid 佈局：
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 767px) {
.header {
flex-direction: column; /* 手機上垂直排列 */
}
}
.dashboard-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 桌面三欄 */
gap: 20px;
}
@media (max-width: 767px) {
.dashboard-layout {
grid-template-columns: 1fr; /* 手機上單欄 */
}
}
相對單位：
%, em, rem, vw, vh 等相對單位來定義寬度、高度、字體大小和間距，確保元素能夠根據視口或父元素的大小自動調整。圖片與媒體：
img { max-width: 100%; height: auto; display: block; } 確保圖片在容器內自動縮放，避免溢出。<picture> 元素配合 <source> 標籤。JavaScript 輔助：
window.matchMedia() API 或 Vue.js 的 Composable 來判斷當前螢幕尺寸。Vue.js 的組件化特性與響應式設計相得益彰：
ProductCard.vue 組件在桌面端可能顯示多行資訊，在手機端則可能只顯示圖片和名稱。<template>
<div class="product-display">
<ProductCardMobile v-if="isMobile" :product="product" />
<ProductCardDesktop v-else :product="product" />
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ProductCardMobile from './ProductCardMobile.vue';
import ProductCardDesktop from './ProductCardDesktop.vue';
const isMobile = ref(false);
const checkMobile = () => {
isMobile.value = window.innerWidth < 768; // 假設 768px 是手機斷點
};
onMounted(() => {
checkMobile();
window.addEventListener('resize', checkMobile);
});
onUnmounted(() => {
window.removeEventListener('resize', checkMobile);
});
</script>
useScreenSize 的 Composable 來封裝判斷螢幕尺寸的邏輯，供多個組件重用。今天，我們深入探討了 POS 系統中響應式設計的重要性與實作方法。
透過理解彈性網格、彈性媒體和媒體查詢這三大基石，並結合 Vue.js 的組件化特性和通用的 CSS 佈局技術，我們能夠構建出一個在任何裝置上都能提供優質使用者體驗的銷售系統。
無論是在繁忙的收銀台、移動的平板，還是店長在手機上查看報表，都能提供流暢、直觀的操作體驗。在接下來的最後一天，我們將會對整個系列進行總結，並展望未來的發展方向。心を燃やせ 🔥！
iThome鐵人賽
看影片追技術