網頁切版說明
切版前端設定說明
字型設定
- 繁體字型:Google Noto Sans TC (思原黑體), Google Noto Serif TC (思原明體)
- 英文字型:Roboto (無襯線)
- 如果有多語系的設定,會依 Google 的雲端字型來設定處理。
Ui 設定
主要用於表單的設定樣式,本人會用 Bootstrap Css 加上 個人一些修飾設定,如果有其他喜好在請告知,謝謝。
Web Framework 設定
會預設安裝 Bootstrap 來處理網頁前端程式,例如輪撥圖片或彈出視窗,以利後續切版處理。(不會用 Bootstrap 開發網頁框架架構)。
Vue3 + Vite / Nuxt
前端框架切版的 npm 安裝僅會採最低限度的設定,因本人僅負責切版部分,如需進階前端開發請由專業前端工程師負責。
切版後續測試說明
Desktop 桌機測試
筆電解析度日漸提升,若筆電廠商將整體字體放大,可能造成平面稿與實際頁面不符。請將顯示設定縮放比例調整為 100%,解析度建議為 1920x1080。
Tablet 平板測試
平板尺寸及比例差異極大,請以市場主流機種測試,避免小眾平板造成顯示誤差。
Mobile 手機測試
請提供可接受的最低解析度,以利設定手機斷點並確保切版測試完整。
特別註解說明
1. 本人設定的 RWD 斷點為:
Desktop:min-width 1190px
Tablet:min-width 576px ~ max-width 1190px
Mobile:max-width 576px
2. 如需完整開發檔案,可提供 HAML、JS、部分 Dart SCSS。因涉及多年整理心血,無法公開完整 Dart SCSS,敬請見諒。