vue中移动端rem flexible.js px2rem 通过viewport来适配

1第一种使用px2rem插件

1. 创建:

在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码;

(function() {

  function a() {

    var b = document.documentElement.clientWidth

    b = b > 750 ? 750 : b

    var c = (b / 750) * 100

    document.getElementsByTagName('html')[0].style.fontSize = c + 'px'

  }

  a()

  window.onresize = a

})()

2. 引入:

在src\main.js中导入之前创建的js文件;

import './config/rem.js'

3. 设置:

在项目中找到build\utils.js,定位至function generateLoaders在其上方定义如下:

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 50 /* //设计稿根元素*/
    }
  }

  // 以上的添加的px2rem的定义
  // 在下方generateLoaders方法中添加[cssLoader,px2remLoader]

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

 

1. 使用:

直接设置css样式使用px单位即可,如果不需要自动转换则在其后面加上/*no*/

 

第二种

一,1.流式布局加视口  

一,-webkit-box-sizing:border-bor处理防止内容溢出,做兼容处理

点击处理高亮的效果,

-webkit-tap-hightlight-color:transparent

封装计算rem

第二种引入插件flexible.js 在计算rem的值

在vue中使用

安装lib-flexible.js

npm install lib-flexible --save

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

import 'lib-flexible/flexible'

在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除

安装px2rem-loader

在实际的开发中,使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ,将px转换成rem,我们将使用px2rem这个工具,

npm install px2rem-loader

 

配置px2rem-loader
修改build/utils.js, 在cssLoader变量中

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加载cssLoader之前加载的loader个数
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 设计稿的1/10
    }
  }
  // 在后面的函数中
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

设置完成后重启项目
 

 

vue移动端适配终极解决方案hotcss

https://github.com/LinkSun/hotcss

 

点击延迟问题

你可能感兴趣的:(rem,ui,移动端)