[Мобильный терминал Vue] реализует адаптивный размер шрифта

Vue.js
[Мобильный терминал Vue] реализует адаптивный размер шрифта

1. Предпосылки

  • Недавно появилась страница обратной связи с пользователями.iPadКонтент, отображаемый на странице, очень мал, а текст на странице нечеткий.
  • Большой экран должен видеть более крупные значки и текст, но он не оправдывает ожиданий

Во-вторых, проблема

  • Размер страницы не адаптируется к ширине экрана просмотра мобильных устройств.
  • Т.к. проект создан давно, единицы css в проекте не унифицированы, например: px/em/rem и т.д.

3. Размышление о проблеме

  • Как сделать так, чтобы страница адаптировалась к ширине области просмотра?
  • Как преобразовать столько единиц px?

4. Обзор эм/рем

  • em

    em

  • Полный английский перевод rem: Root Element

    rem

截图来自： 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 ? 这可行，实现之后，后期无需维护，只要随着工程构建，就可以实现转换

В-шестых, реализация кода

решить задачу 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
  • Во-первых, мы знаем, что загрузчик загрузчиков выполнения последовательности возвращается вперед; заглушка PUTGINS от фронта до заднего порядка выполнения.
  • Таким образом, даже если мы используем less/sass для написания стилей в проекте, нам все равно придется пройти через css-loader для обработки, тогда нам нужно будет выполнить операцию только между less-loader/sass-loader и css-loader для операции px в rem.
  • Загрузчик px2rem, используемый арендодателем
  • Поскольку проект построен с помощью vue-cli2, мы находим util.js
1. 安装

yarn add px2rem-loader -D

2. 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 plugin
    function 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.html
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }
}

Если в некоторых конкретных ситуациях нет необходимости конвертировать px, вы можете настроить следующее

.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

После завершения настройки запустите локально и увидите следующий эффект. Мы сделали большой шаг.

7. Проблемы столкнулись

  • Следующая ошибка возникает при упаковке и сборке

  • Решение: обновить happypack, проблема решена

// package.json

"devDependencies": {
    "happypack": "5.0.1",
    "px2rem-loader": "^0.1.9"
}

Наконец, я желаю всем прогрессировать вместе! Учиться усердно не плохо

Категории