zoukankan      html  css  js  c++  java
  • vue-cli 【flexible】屏幕字体自适应布局及配置

    0.前言:

    很多前端小伙伴在写页面尤其是移动端页面的时候,要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应【注:非响应式】,那么,在vue-cli脚手架中应该如何去实现呢?

    1.安装flexible库 :

    //在项目库下运行:
    npm i lib-flexible --save-dev

    2.项目入口文件main.js中引入lib-flexible:

    //main.js中:
    import 'lib-flexible'

    3.在项目index.html的head中配置meta:

    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    4.安装px2rem-loader:

    //在项目库下运行
    npm install px2rem-loader --save-dev

    5.配置px2rem编译器:

    在build/utils.js中,将px2rem-loader添加到cssLoaders中:

    //自适应字体配置
    const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
    remUnit: 37.5 //设计稿的宽度 除以 10,现阶段一般设计稿的宽度都为750px。如果基于iPhone5设计则为32.0(320 / 10 = 32)
    }
    }
    // generate loader string to be used with extract text plugin
    function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    /**
    *其余的不用改
    */
    }

    6.启动项目:

    npm run dev

    后语:

    启动项目之后会惊讶的发现已经完美解决了,即使在PC端也是适用的哦~

  • 相关阅读:
    sqlserver数据库备份还原时出现3241问题
    ssms安装失败_拒绝访问0x80070005解决方法
    Linux strace命令
    争议 | 要不要去IT外包公司工作?
    sqlserver计算时间差DATEDIFF 函数
    CodeForces
    [HNOI 2016] 网络
    CodeForces
    AtCoder Beginner Contest 209
    学习4412开发板+项目实战+配套视频+每日指导
  • 原文地址:https://www.cnblogs.com/wangsongbai/p/10487360.html
Copyright © 2011-2022 走看看