zoukankan      html  css  js  c++  java
  • vue自适应pc端界面

    通常会要求适应各种的屏幕尺寸。因此就要求写出来的前端页面是能够自适应的, 用现在pc端的设计稿一般都是1920*1080的。

    目前有许多的前端库是支持响应式布局的,比如 bootstrap、element-ui 等组件库。
    阿里也提供了一套自适应布局方案,就是 lib-flexible。将 px 转为 rem。

    依赖

    首先需要安装 vue-cli 脚手架,这里我安装的是 cli3。
    项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader。

    1.  npm i lib-flexible -S
    2.  npm i px2rem-loader -D

    接着在项目入口文件 main.js 中引入 lib-flexible

    import 'lib-flexible/flexible.js'

    配置

    在实际开发中得到的设计稿都是 px 单位的,如果手动将 px 转为 rem ,显然是一件较为麻烦的事情,因此可以通过一些工具来帮助我们实现。

    vue-cli3 因为减少了对于 webpack 的配置,因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件,在这个文件里就可以自己增加或修改一些 webpack 配置。

    首先添加一个新的 Loader,vue-cli 的文档中也写的非常清楚了,需要在文件中添加一下代码

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('css')
          .test(/.css$/)
          .oneOf('vue')
          .resourceQuery(/?vue/)
          .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 192   //代表的是 1rem = ?px  这里假设设计稿是 1920px ,那么这里的比例就是 1/10
          })
          .end()
      }
    }
    此时重启服务器就生效以上配置了。但还是存在一些问题,虽然可以转换为 rem 了,但是计算出来的比例确实 1rem = 54px,这是因为 flexible.js 文件会默认写死了一个比例,我们需要作出一些修改。
    function refreshRem(){
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
              //  width = 540 * dpr;   就是这里的问题,需要将 540 修改为 width,不将宽度写死就ok了。
              width = width * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
      }


  • 相关阅读:
    laravel如何自定义一个路由文件
    RGAC-laravel权限管理
    导航栏下划线跟随
    php简单的判断用户登陆
    php判断文件上传的类型
    git 如何删除仓库中的文件
    laravle中config( )函数的使用
    [leetcode] Count and Say
    [leetcode] Sudoku Solver
    [leetcode] Search Insert Position
  • 原文地址:https://www.cnblogs.com/shun1015/p/13445783.html
Copyright © 2011-2022 走看看