Vue项目移动端适配

flhua1

已于 2022-06-09 10:00:36 修改

阅读量272

点赞数

文章标签： vue.js postcss javascript

于 2022-05-30 16:44:37 首次发布

本文链接：https://blog.csdn.net/flhua1/article/details/125049535

版权

本文介绍了Vue项目在移动端的适配过程，包括安装依赖、配置postcss插件postcss-pxtorem和在main.js中引入相关包。通过设置rootValue转换倍数，实现px到rem的自动转换，确保在不同尺寸设备上的显示效果。

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

Vue项目移动端适配

安装依赖

npm i amfe-flexible postcss-pxtorem --save-dev

2.安装完成

我们需要进行postcss插件相关的配置在根目录新建一个名为postcss-config.js的文件，如果项目中已包含该文件则无需新建。在文件中写入如下代码：

module.exports = {
   
	plugins: {
   
		'postcss-pxtorem': {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flhua1

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目移动端适配

Vue移动端适配
复制链接

扫一扫

【Webpack】从零构建Vue项目配置

jzq950522的博客

10-22

431

从零开始构建基于webpack4.0的Vue项目脚手架

为Babel和TypeScript添加`module.exports`编译代码-JavaScript开发

05-26

add-module-exports-webpack-plugin为Babel和TypeScript编译后的代码添加module.exports将ES2015模块与Babel一起使用或在TypeScript中具有默认导出功能时，它们会生成代码，要求您将其导入add-module-exports-webpack -plugin为Babel和TypeScript编译的代码添加module.exports当您将ES2015模块与Babel一起使用或在TypeScript中具有默认导出时，它们会生成代码，要求您使用CommonJS中的require（'x'）。default而不是require来导入它。（'X'）。此插件启用后者。安装$ npm install add-module-exports-webpack-plugin用法const AddModuleExportsPlugin = require（'add-module-exports-webpack-plugin'）; module.exports = {//…输出

参与评论您还未登录，请先登录后发表或查看评论

一篇文章搞懂！vue中pc端与移动端适配解决方案（亲测有效）

最新发布

djemx2025的博客

06-03

6214

当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。

【VUE】常见移动端适配方案

SZnAl的博客

12-30

6721

使用插件 postcss-px-to-viewport[3] 进行相关配置，就可以帮助我们将。参考：通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配[2]在项目中，如果设计师要求某一场景不做适配，需为固定的宽高或大小，这时我们就需要利用。方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素。：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。方案是阿里早期开源的一个移动端适配解决方案，引用。的大小，以此来达到适配不同屏幕尺寸的目的。

vue3+vant移动端适配 px转换rem

HeXinT的博客

11-06

1186

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 1.安装依赖 yarn add amfe-flexible 或者使用 npm i amfe-flexible 复制区：yarn add amfe-flexible npm i amfe-fl...

vue项目的移动端适配方案

weixin_40758662的博客

07-19

1893

可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。1、在安装好的依赖文件夹node_modules中，找到amfe-flexible/index.js文件，将文件的内容复制出来。2、在src/assets/js文件中，新建amfe-flexible.js文件，粘贴步骤1的内容。③postcss.config.js ，在根目录下新建改文件夹（亲测该方法，可用）2、在main.js中引用。

vue项目移动端适配

七七的博客

10-28

374

2.创建一个rem.js文件，然后再main.js文件中引入rem.js文件。1，下载postcss-pxtorem插件（把px自动转成rem）rem.js文件里面的代码。

vue3移动端适配的解决方案（老方案）

12-01

Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...

vue做移动端适配最佳解决方案(亲测有效)

12-04

vw 解决方案 1. 安装并配置PostCss插件代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 ...

vue移动端适配完美解决方案demo.rar

04-21

vue移动端适配问题,px自动转换vw,跟设计稿直接计算匹配,非常方便准确免c币下载地址 https://download.lllomh.com/cliect/#/product/F421745961449998

vue 移动端适配方案详解

11-29

本文将详细讲解两种常见的 Vue 移动端适配策略：使用 `rem` 布局和 `lib-flexible` 插件。 ### 一、rem 布局 `rem`（root em）单位是一种基于根元素（通常是 `<html>` 元素）字体大小的相对单位。通过动态调整根...

[万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境）

GoldenaArcher的博客

07-01

2445

本次项目属于练手项目，使用的是 vue-cli 新建的新手引导页面，项目本身没有特别复杂的逻辑，而且这里也不涉及到 Vue 的学习，只是会通过逐步分解完成使用 webpack 对项目完成最终的打包。本次会使用到的插件(plugins) 和加载器(loaders) 有： webpack & webpack-cli vue-loader & vue-template-compiler style-loader & less & less-loader ...

webpack配置之entry、output、devServer、plugins、resolve、module

weixin_43837268的博客

06-20

1431

module.exports = { mode: '', entry: '', output: '', plugins: [], module: [], resolve: '', devServer: {} } 1.entry 入口起点：用来指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出...

webpack插件

m0_59347168的博客

04-15

648

webpack插件： npm install clean-webpack-plugin -D 在webpack.config.js中导入： const {CleanWebpackPlugin} = require(“clean-webpack-plugin”); 在webpack.config.js中module.exports中添加plugins配置： plugins:[ new CleanWebpackPlugin() ]; npm install html-webpack-plugin -D 在we

vue实现移动端适配

一个努力不被优化的程序员

12-12

2878

目录1. 使用vw单位：vw是视窗宽度的百分比，可以根据不同设备的屏幕宽度来进行自适应。在Vue中可以通过设置全局CSS样式，将所有的尺寸单位改为vw。2. 使用Flexible.js：Flexible.js是一个用于淘宝移动端适配的库，可以根据屏幕宽度动态设置html的font-size。在Vue项目中，可以通过在入口文件main.js中引入Flexible.js来实现移动端适配。3. 使用第三方组件库：有一些优秀的移动端UI组件库可以帮助我们快速实现移动端适配，例如Vant、Mint UI等。这些组件库

PostCSS的配置文件

x311609001028的博客

09-16

3579

Vue中使用Vant组件库时，需要使用rem单位，使用了以下两个工具： postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem lib-flexible用于设置 rem 基准值在使用PostCSS 时提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改 module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', '..

Vue 项目笔记持续更新

没有翅膀的我们，只是随便认为不能飞而已

10-29

652

公司一直是vue-cli2,正好要项目重构，所以趁此机会，将项目理一遍。如果有坑，希望大佬指出。 移动端UI Vant 选择的是vant,为此也纠结了一会，也是第一次使用。慢慢采坑，一踩一个准按需加载安装 npm i vant -S yarn add vant 按需加载在 babel.config.js 中配置 module.exports = { plugins: [ ...

vue移动端项目适配方法

m0_61924791的博客

08-23

1395

vue移动端项目适配方法

vue3移动端适配怎么解决

07-15

在Vue 3中实现移动端适配可以采用以下几种方法： 1. 使用CSS媒体查询：使用CSS媒体查询来根据屏幕宽度或设备类型应用不同的样式。通过设置不同的样式规则，可以根据设备的屏幕大小和方向进行响应式布局和适配。例如，您可以使用`@media`查询来设置不同的字体大小、布局方式等。 2. 使用rem单位：使用相对单位rem来进行移动端适配。将根元素的字体大小设置为相对于设备宽度的比例，并在样式中使用rem单位来定义尺寸。这样，不同设备的尺寸会根据根元素的字体大小进行缩放，实现适配效果。 3. 使用第三方CSS框架：许多CSS框架（如Bootstrap、Vant等）提供了移动端适配的解决方案。这些框架通常包含了响应式布局、栅格系统和移动端样式组件，可以方便地进行移动端开发和适配。 4. 使用Vue插件或工具：有一些Vue插件或工具专门用于移动端适配。例如，可以使用Viewport Units Buggyfill插件来解决某些移动设备上对vw和vh单位支持不完全的问题。还可以使用postcss-px-to-viewport插件将像素单位自动转换为vw或vh单位。综合使用上述方法，可以根据具体的项目需求和开发情况选择合适的移动端适配方案。需要根据项目的具体情况进行调整和优化，确保在不同设备上都能获得良好的用户体验。