扣丁学堂HTML5培训详解vue中移动端自适应方案

2019-05-05 15:46:00 3514浏览

今天扣丁学堂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从入门到精通开发实战技能。扣丁学堂H5技术交流群:673883249。


                          【扫码进入HTML5VIP免费公开课】  


     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  



查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 HTML5培训班
微信
微博
15311698296

全国免费咨询热线

邮箱:codingke@1000phone.com

官方群:148715490

北京千锋互联科技有限公司版权所有   北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
京ICP备2021002079号-2   Copyright © 2017 - 2022
返回顶部 返回顶部