vue中适配移动端布局方案

用vue开发一个h5移动端项目需要做适配

传统方法

在public文件夹下html页面加入js，css中样式用到px的地方改为rem(真实宽高/一个固定比例)

<!--适配-->
<script type="text/javascript">var html = document.querySelector('html');changeRem();window.addEventListener('resize', changeRem);function changeRem() {var width = html.getBoundingClientRect().width;html.style.fontSize = width / 19.2 + 'px';console.log(html.style.fontSize)}
</script>

解决方案

1.第一步：安装三个插件

npm install amfe-flexible -D

npm install postcss-pxtorem -D

npm install autoprefixer -D

2.第二步：在main.js文件中导入amfe-flexible

import 'amfe-flexible'

第三步：vue.config.js中配置

const { defineConfig } = require("@vue/cli-service");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");module.exports = defineConfig({// 配置css前缀,px转remcss: {loaderOptions: {postcss: {postcssOptions:{plugins: [autoprefixer(),pxtorem({rootValue: 192,  //根据设计稿宽度/10propList: ["*"]})]}}}}
});

第四步：页面使用

在css中可以直接写px,会被转化为rem，不用去计算rem值，从而做到自适应伸缩。

vue中适配移动端布局方案相关推荐

vue 移动端布局方案
postcss-px-to-viewport (推荐使用这个方案) 他是这样一款优秀.高效.简洁的解决方案,它能完美解决上面的三个痛点,高效的将代码中px单位转为rm.rem.vw等视口单位,一份配置 ...
vue适配移动端布局
上代码 // 下载依赖 npm i lib-flexible npm i px2rem-loader // 如果报错显示找不到模块现下载面的这个依赖 npm i postcss-px2rem // 找 ...
echarts-wordcloud在vue中适配2k，4k
在项目中 install 并在main.js文件中引入 echarts以及在你使用到echarts-wordcloud的vue组件中引入 (因为echarts-wordcloud是echarts的扩展 ...
移动Web开发基础-flexible布局方案
概述前面我们已经已经了解了两种基本的布局方案,移动Web开发基础-百分比+flex布局方案和移动Web开发基础-rem布局,其中rem布局方案和我们今天要了解的flexible布局方案是有关系的 ...
vue中的 SPA 与 SSR 的使用场景以及element-UI、Nuxt.js 的使用
1. SSR 的应用场景 SPA 页面内容是在浏览器中(客户)渲染,搜索引擎不友好互联网(公众,天猫,京东,静态化 --- SSR )企业应用(内网,没有 SEO 需求,不需要 SSR)SSR---静 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
vue中使用flexible.js并配合px2rem-loader实现移动端布局
适配移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install li ...
vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案（很实用！收藏）...
来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...

vue中适配移动端布局方案

vue中适配移动端布局方案相关推荐

最新文章

热门文章