隨著行動互聯網的發展，越來越多的網站和應用程式開始將行動終端作為主要的存取方式。在行動端開發中，如何適應不同的設備解析度成為一個重要的議題。對於 Vue 開發者而言，行動端適配需要考慮不同螢幕尺寸、密度和方向的適配問題。
傳統的適配方式是透過媒體查詢和 rem 單位來實現的。具體方法是先針對不同的螢幕分別設定不同的樣式文件，然後使用 rem 單位實現相對於根元素的寬度來縮放字體和元素大小。行動端裝置通常都採用裝置像素比（Device Pixel Ratio，DPR）大於1的高清屏，為了確保顯示效果，需要使用 viewport 設定正確的縮放比例。下面是一個基於 rem 單位的適配方案範例。
/* 设置用于计算 rem 值的根元素字体大小 */ html { font-size: 16px; } @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { /* 针对 4 英寸屏幕设置样式 */ html { font-size: 14px; } } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) { /* 针对 4.7 英寸屏幕设置样式 */ html { font-size: 16px; } } @media only screen and (min-device-width: 414px) and (max-device-width: 736px) { /* 针对 5.5 英寸屏幕设置样式 */ html { font-size: 18px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* 针对 9.7 英寸 iPad 屏幕设置样式 */ html { font-size: 24px; } }
如上程式碼所示，透過媒體查詢針對不同裝置的螢幕寬度設定不同的根元素字體大小，再透過 rem 單位實現相對於根元素的寬度縮放元素大小。
但是，這種傳統的適配方式存在一些問題。首先，由於 rem 是相對於根元素字體大小計算，可能存在縮放誤差。其次，由於 viewport 縮放比例設定可能存在一些問題，可能會導致某些元素顯示異常。
因此，在 Vue 行動裝置開發中，建議使用 flex 佈局作為適配方案。使用 flex 佈局的好處是可以透過設定不同的 flex 屬性來實現不同尺寸設備的適配。通常，透過以下步驟來實現行動端適配：
在 HTML 檔案 head 標籤中加入以下程式碼：
可以使用Vue.js 專案中的sass-resources-loader 外掛程式來自動化開啟flex 佈局特性：
const path = require('path') module.exports = { css: { loaderOptions: { sass: { prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";` }, }, }, }
其中，flex.scss檔案程式碼如下：
/* 开启 flex 布局特性 */ $flex: 1; $flex-use-strict: false; // 不使用严格模式，防止出现 flex-basis 百分比计算错误 @mixin flex($direction: row, $justify: center, $align: center) { display: flex; flex-direction: $direction; justify-content: $justify; align-items: $align; } @mixin align-self($align: center) { align-self: $align; } @mixin flex-wrap($wrap: wrap) { flex-wrap: $wrap; } .flex { flex: #{$flex}; } .flex-row { @include flex(row); } .flex-column { @include flex(column); } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .flex-between { justify-content: space-between; } .flex-around { justify-content: space-around; } .flex-center { justify-content: center; align-items: center; } .flex-align-start { align-items: flex-start; } .flex-align-end { align-items: flex-end; } .flex-align-center { align-items: center; } .flex-wrap { @include flex-wrap; } .flex-self-start { @include align-self(flex-start); } .flex-self-end { @include align-self(flex-end); } .flex-self-center { @include align-self(center); } .flex-self-auto { @include align-self(auto); }
例如：以iPhone 6/7/8 系列（375x667）為基準，設計稿尺寸為750x1334，可以先設定根元素字體大小為100px，然後其他元素的尺寸以rem 為單位進行設定。
html { font-size: 100px; } @media only screen and (max-width: 480px) { /* 750 x 1334 设计稿在 480 这个断点上相当于 375 x 667 */ html { font-size: 66.7px; } } @media only screen and (min-width: 481px) and (max-width: 767px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 414 x 736 */ html { font-size: 110.94px; } } @media only screen and (min-width: 768px) { /* 750 x 1334 设计稿在 768 这个断点上相当于 768 x 1366 */ html { font-size: 153.6px; } }
使用上述步驟實作行動端適配後，可以避免使用傳統的媒體查詢和 rem 大幅度縮放元素大小。此外，響應式的 flex 佈局適用於不同解析度和方向的行動設備，能夠更好地適合使用者的設備。
以上是vue行動端適配不了的詳細內容。更多資訊請關注PHP中文網其他相關文章！
