脚本宝典收集整理的这篇文章主要介绍了扣丁学堂HTML5培训详解vue中移动端自适应方案，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

今天扣丁学堂HTML5培训老师给大家介绍一下关于vue中移动端自适应方案的详细介绍，希望对同学们学习HTML5开发有所帮，下面我们一起来看一下吧。

方案1：

直接引入js（自己写的动态改变fontsize的js）

function htRem() {

  var ww = document.documentElement.clientWidth;

  if (ww > 750) {

    ww = 750;

  }

  document.documentElement.style.fontSize = ww / 7.5 + "px";

}

htRem();

window.onresize = function() {

  htRem();

};

在main.js中import引入即可

方案二：手淘的lib-flexible+rem

配置flexible

安装lib-flexible

在命令行中运行如下安装：

npm i lib-flexible --save

引入lib-flexible

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

// main.js

import 'lib-flexible'

添加meta标签

在项目根目录的index.html中添加如下meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px转rem

实际开发中，我们通过设计稿得到的值单位是px，所以要将px转换成rem再写进样式中。

将px转换成rem我们将使用px2rem这个工具，它有webpack的loader：px2rem-loader

安装px2rem-loader

在命令行中运行如下安装：

npm i px2rem-loade --save-dev

配置px2rem-loade

在vue-cli生成的webpack配置中，vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的一个方法生成的。

我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里我们假设设计稿宽为750px。

// utils.js

var cssLoader = {

loader: 'css-loader',

options: {

minimize: process.env.NODE_ENV === 'production',

sourceMap: options.sourceMap

}

}

var px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 75

}

}

// ...

并放进loaders数组中

// utils.js

function generateLoaders(loader, loaderOptions) {

var loaders = [cssLoader, px2remLoader]

// ...

修改配置后需要重启，然后我们在组件中写单位直接写px，设计稿量多少就可以写多少了，舒服多了。

以上所述是小编给大家介绍的vue移动端自适应详解整合，希望对大家有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

脚本宝典总结

以上是脚本宝典为你收集整理的扣丁学堂HTML5培训详解vue中移动端自适应方案全部内容，希望文章能够帮你解决扣丁学堂HTML5培训详解vue中移动端自适应方案所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。