基于vue-cli配置移动端自适应—淘宝弹性布局方案lib-flexible和px2rem-loader实践（750px设计稿）

最新推荐文章于 2024-08-09 16:21:47 发布

人间草木96

最新推荐文章于 2024-08-09 16:21:47 发布

阅读量2.2k

点赞数 4

分类专栏：个人总结 vue 文章标签：淘宝rem适配移动端

本文链接：https://blog.csdn.net/qq_43258252/article/details/86538489

版权

本文介绍了如何在Vue项目中使用lib-flexible和px2rem-loader实现移动端适配，详细阐述了从安装到配置的步骤。首先安装lib-flexible，接着在main.js中引入，并在index.html中添加meta标签。然后，通过px2rem-loader将px转换为rem，安装px2rem-loader，并在webpack配置中进行相关设置，确保1rem等于设计稿宽度的1/10（以750px设计稿为例）。最后，重启项目，即可按设计稿尺寸直接编写px单位的样式。

摘要由CSDN通过智能技术生成

在vue中引入lib-flexible

首先你要确保vue环境搭建成功

配置 flexible

第一步：

安装 lib-flexible， npm install lib-flexible --save

第二步：

引入 lib-flexible

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

import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible/flexible'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第三步：

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale&

最低0.47元/天解锁文章

人间草木96

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录