【Vue移動端】實現字體大小自適應

時間 2021-08-14

標籤 css html vue node webpack git github web vue-cli json 欄目 CSS 简体版

原文原文鏈接

1、背景

最近一直有用戶反饋頁面的在 iPad 上顯示的內容很是小，頁面上的文字看不清楚
大的屏幕理應看到更大的圖標和文字，結果卻沒有達到預期

2、問題

頁面大小沒有根據移動設備的視口寬度進行自適應
因爲項目成立的時間比較長，工程中 css 的單位不統一，例如：px / em / rem 等

3、對問題的思考

如何實現頁面根據視口的寬度進行自適應？
如何對這麼多的 px 單位進行轉換？

4、複習 em / rem

emcss
rem 英文的完整翻譯是：Root Elementhtml

截圖來自： MDN
連接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length複製代碼

5、解決問題的思考

1. 在網上查找了大量的資料，業界的主要解決方案是 rem，所以樓主也採用了 rem 的方式。
   採用 rem 的方式，那天然是引入了 amfe-flexible 庫進行實現。問題1迎刃而解

2. 如何實現工程中的 px 轉 rem，這是一個頭疼的問題。
    2.1 直接手動把工程中的全部 px 換算爲 rem ? 這不現實，成本過高
    2.2 寫一個工具先把 工程中的全部 px 換算爲 rem ? 這可行，可是仍是不夠自動化，後期維護噁心
    2.3 webpack 打包的時候，把 px 轉 rem ? 這可行，實現以後，後期無需維護，只要隨着工程構建，就能夠實現轉換複製代碼

6、代碼的實現

解決問題 1

引入 amfe-flexible 實現根節點 rem 配置

<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><!--這裏的文件能夠根據本身的實際狀況，將源碼copy一份進行修改--><script src="./node_modules/amfe-flexible/index.js"></script></head>複製代碼

解決問題 2

首先咱們知道，loaders 裝載器的運行順序是從後往前；pulgins 外掛的執行順序是從前日後。
那麼即便咱們在工程中使用 less / sass 寫樣式，最後仍是要通過 css-loader 進行處理，那麼咱們對 px 轉 rem 的操做，只須要在 less-loader/sass-loader 和 css-loader 之間進行便可
樓主採用的 px2rem-loader
因爲項目工程是 vue-cli2 搭起來的，所以咱們找到 util.js

1. 安裝

yarn add px2rem-loader -D2. util.js 配置exports.cssLoaders = function (options) {
    options = options || {}const cssLoader = {loader: 'css-loader',options: {minimize: process.env.NODE_ENV === 'production',sourceMap: options.sourceMap,importLoaders: 1}
    }// 關鍵點 !!const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 50, // 項目規範以50px爲基準數，可根據本身額實際狀況而定exclude: /(node_module)/}
    }// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {let loaders = [cssLoader, px2remLoader]if (loader) {
            loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap
                })
            })
        }// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})
        } else {return ['vue-style-loader'].concat(loaders)
        }
    }// http://vuejs.github.io/vue-loader/en/configurations/extract-css.htmlreturn {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')
    }
}複製代碼

如有些特定的情形不須要轉換 px，那可進行以下配置vue

.selector {  width: 150px;  height: 64px; /*px*/
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/}複製代碼

px2rem-loader 基於 px2rem 實現，不少用法和 px2rem 相似

https://github.com/Jinjiang/px2rem-loader複製代碼

配置完成，本地運行，看到以下效果，咱們就完成了一大步node

7、遇到的問題

打包構建時出現如下的錯誤webpack
解決方案: 升級 happypack，問題解決git

// package.json"devDependencies": {"happypack": "5.0.1","px2rem-loader": "^0.1.9"}複製代碼

最後祝你們一塊兒進步！好好學習不會差

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【Vue移動端】實現 字體大小 自適應

1、背景

2、問題

3、對問題的思考

4、複習 em / rem

5、解決問題的思考

6、代碼的實現

解決問題 1

解決問題 2

7、遇到的問題

最後祝你們一塊兒進步！好好學習不會差

【Vue移動端】實現字體大小自適應