精华内容
下载资源
问答
  • vue项目手机端适配

    2021-01-05 15:43:57
    项目入口文件main.js 中引入lib-flexible import ‘lib-flexible’ 注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!! 3、配置

    1、安装 flexible和 postcss-px2rem

    yarn add lib-flexible --save

    yarn add postcss-px2rem --save

    2、 引入lib-flexible

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

    import ‘lib-flexible’

    注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!

    3、配置postcss-px2rem

    px2rem的配置放在vue-cli3 项目中vue.config.js中,具体配置内容:

    module.exports = {

        css: {

            loaderOptions: {

                css: {},

                postcss: {

                    plugins: [

                        require('postcss-px2rem')({

                            remUnit: 37.5

                        })

                    ]

                }

            }

        },

    }

    展开全文
  • 翻了项目结构也没找到在哪里适配的rem。。。然后也不好意思问别人。。。 然后就。。。 在网上查了一下,原来真的有一种方法可以直接把px转换成rem的方法,,是lib-flexible配合px2rem-loader插件 然后自己就试着做...

    在新公司熟悉项目时发现项目写的都是以px为单位,但是页面上显示的都是rem单位。。。
    这是什么鬼。。翻了项目结构也没找到在哪里适配的rem。。。然后也不好意思问别人。。。
    然后就。。。
    在这里插入图片描述
    在网上查了一下,原来真的有一种方法可以直接把px转换成rem的方法,,是lib-flexible配合px2rem-loader插件
    然后自己就试着做了一下,真的很好用。。
    1.首先是安装:lib-flexible

    npm i lib-flexible --save-dev
    

    2.在main.js中引入lib-flexible

    //移动端适配
    import 'lib-flexible/flexible'
    
    

    3.安装px2rem loader

    npm install px2rem-loader --save-dev
    

    4.打开build/utils.js文件,找到exports.cssLoaders方法,在里面添加如下代码

    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUint: 75
        }
      }
    

    在这里插入图片描述
    5.同时,在generateLoaders方法中添加px2remLoader

    const loaders = [cssLoader, px2remLoader]
    

    在这里插入图片描述

    记得关掉项目重启!!

    记得关掉项目重启!!

    记得关掉项目重启!!

    然后你就会神奇的发现,控制台中的px已经变成了了rem
    1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem
    2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /
    no
    /就可以了**
    在这里插入图片描述

    展开全文
  • vue移动端项目适配

    2020-03-18 11:09:16
    这里介绍使用lib-flexible插件去做适配,使用lib-flexible,给div设置了一个宽度(px),它会跟手机分辨率大小自动调节 1、安装 npm install lib-flexible --save npm install px2rem-loader --save 2、导入 在main....

    这里介绍使用lib-flexible插件去做适配,使用lib-flexible,给div设置了一个宽度(px),它会跟手机分辨率大小自动调节

    1、安装

    npm install lib-flexible --save
    npm install px2rem-loader --save

    2、导入

    在main.js中导入import 'lib-flexible/flexible'
    在这里插入图片描述

    3、配置
    1) 找到build下的utils.js加入以下配置
    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          //一般设置75 一般是设计稿除以10得到的值
          remUnit:  37.5 // 37.5按照375设计图尺寸在设计,75安装750设计图尺寸设计
        }
      }
    

    在这里插入图片描述
    同样在utils.js文件下找到generateLoaders方法,然后加入px2remLoader
    在这里插入图片描述

    2) 对于外部导入的css做配置,以然后再uitils.js中找到css-loader,添加一下配置

    如果不添加以下配置,那么@import导入的外部css将不能正常转换

     const cssLoader = {
        loader: 'css-loader',
        options: {
          sourceMap: options.sourceMap,
          //默认是0
          importLoaders:2
        }
      }
    

    在utils.js种的配置都要重启vue才能生效

    3) 在根目录中的index.html中去除 viewport 的 meta 标签,flexible会自动设置

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    在这里插入图片描述

    4、使用

    在这里插入图片描述

    展开全文
  • Vue项目移动端适配

    2021-05-13 18:20:23
    Vue项目适配不同的设备

    采用fontSize和rem来实现,1rem 相对根html的fontSize,例如,当你把html的font-size设置为100px,在其他子标签中设置1rem就等价于100px,2rem就等价于200px,0.1rem等价于10px,其他类推,我们的思路是在根html获取窗口大小,根据和初始编写环境(手机)比较,来对内容进行放大缩小,来设置根的html的font-size,就可以实现不同设备的适配。

    整体代码:

    index.html中代码:

    //index.html
     <script>
        var width = document.documentElement.clientWidth || document.body.clientWidth;
        var ratio = width / 375;//375是初始编程的窗口大小
        var fontSize = 100 * ratio;
        document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
      </script>
    

    main.js中代码(在全局使用):

    //main.js
    import './style/index.scss'//设置rem
    

    index.scss中代码:

    //index.scss
    @import './base.scss';
    

    base.scss中代码:

    /*base.scss*/
    html {
        font-size: 100px
    }
    body {
        font-size: .12rem
    }
    /* 
    1 rem = html fontSize
    2 rem = 2 * 100px = 200px
    */
    

    完成以上四步就可以实现适配。

    Finish!!!

    展开全文
  • 解决Vue项目的移动端适配问题

    千次阅读 2020-10-28 20:25:08
    解决Vue项目的移动端适配问题 移动端适配有很多种方案,如flex布局,百分比布局,响应式布局,vw布局;我个人比较喜欢的是rem和vw,当然最喜欢的是rem适配方案,因为它的兼容性更佳! 一、基础知识 在进入正文之前...
  • Vue项目适配移动端 + 适配PC

    千次阅读 2021-01-23 09:31:55
    一、适配PC 参考文档:https://www.cnblogs.com/wuqilang/p/13491766.html 1、 在 /src/assets 目录下新增 js 文件夹,在js文件夹中新增 flexible.js (function flexible(window, document) { var docEl = ...
  • 应用场景 页面需要在pc和移动端同时兼容,以前我...postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件 // css相关配置 css: { // 启用 CSS modules modules: false,
  • vue手机端适配

    万次阅读 2018-05-11 17:29:41
    下载lib-flexible ..."width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" ...'vue-style-loader' ].concat(loaders) } } npm run dev重新运行
  • vue中web手机端适配问题

    千次阅读 2020-09-02 10:58:01
    vue中web手机端适配问题 在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位,是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px},那么p{font-size: 1rem}的字体大小就...
  • Vue手机和pc端适配问题 首先要用到postcss-pxtorem这个第三方,用npm安装下,我项目中用的是5.1.1版本,接下来我就用这个版本来做示范。安装好之后要在vue.config.js文件中做配置如下: module.exports ={ css:{ ...
  • Vue项目PC屏幕适配

    2021-02-08 11:03:56
    根据项目的设计图 版心一般情况下居中且宽度在1200px然后背景图根据屏幕自适应大小,在小屏的笔记本等设备上就会导致页面显示不全。 接下来是处理。。。 1.新建device.js文件。 class devicePixelRatio { ...
  • vue自适应手机端的后台管理系统,针对手机端的适应效果进行优化 ,各种分辨率的调试都完美适应
  • vw 解决方案 1. 安装并配置PostCss插件 代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 ...
  • 因为最初没有要求适配移动端,临时加的需求,要保证移动和pc双端适配,已知的可以用媒体查询(需要加很多代码),不知道有没有别的好方法.写两套样式也行,可是工作量会增大很多.除此以外,还有没有别的好的解决方法&...
  • vue项目移动端、pc端适配方案(px转rem)

    万次阅读 多人点赞 2020-02-06 13:18:30
    vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size px2rem-loader 自动将px单位转换成rem 一、第一步先安装 flexible和 px2rem-loader(命令行...
  • vue项目移动端、pc端适配方案

    千次阅读 2020-05-20 14:20:49
    vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible和 postcss-px2rem...
  • 使用vue-cli安装好一个vue项目 npm install -g vue-cli vue init webpack my-project cd my-project npm run dev 配置vue插件 lib-flexible 安装插件 lib-flexible npm i lib-flex...
  • 要想移动端适配 并使用 rem 您需要先看这篇文章,配置好less :right_arrow_selector: 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招。 postcss-pxtorem:...
  • vue前端移动端页面适配问题解决方案 1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中:import ‘lib-flexible/flexible’ 2.引入px2rem-loader cnpm install --save px2rem-loader 3.将px2...
  • rem适配 一、项目中安装lib-flexible 在main.js中引入lib-flexible lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font- size为屏幕 宽度除以10,也就是1rem等于html根...
  • vue框架适配移动端

    2019-10-24 12:09:35
    vue init webpack (项目名) 安装六个组件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S postcss-aspect-ratio-mini po.....
  • 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem...
  • vue如何适配移动端

    2019-07-31 09:58:49
    做移动端 相信大家刚刚开始的时候 都会很反感 因为他不像pc那样 这里会处理很多的兼容性 但是找到方法 做完适配 一切都边的很简单了 1. 使用lib-flexible 之前文章里面介绍过了 这里就不多介绍了 2.使用vw适配 ...
  • PC端项目适配移动端,页面不自动缩放 使用了响应式和媒体查询,可是页面看起来还是不适配,整体很大,没有缩放, 解决方法: 找到index.html,删掉后半部分,解决。 <meta name="viewport" content="width=...
  • vue项目移动端适配的方法

    万次阅读 2019-09-16 16:04:18
    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: 例如在Galaxy S III: 例如在iphone6/7/8: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,116
精华内容 1,246
关键字:

vue项目适配手机端

vue 订阅