【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移动端】实现字体大小自适应