VUE-移动端-自适应插件的使用

最新推荐文章于 2025-05-16 10:23:47 发布

woshi759956817

最新推荐文章于 2025-05-16 10:23:47 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/woshi759956817/article/details/123495316

本文介绍了移动端UI适配的配置过程，包括通过npm安装amfe-flexible和postcss-px2rem插件，然后在main.js中引入并使用rem单位。此外，还展示了如何在package.json中配置postcss，将px转换为rem，以750px为基础进行计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1安装插件

npm i amfe-flexible --save
npm i postcss-px2rem --save

2 main.js 引入

import rem from ‘amfe-flexible’
Vue.use(rem)

3 package.json配置

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 75
      }
    }
  }

75 是ui按照750px来计算的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

woshi759956817

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue页面自适应（px插件转rem）

Sinner_H的博客

04-18

954

vue实现页面自适应PX转REM

vue做移动端自适应插件实现rem

html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...

03-28

623

amfe-flexible：为html、body提那家font-size，窗口调整的时候重新设置font-size。（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为370，即rootValue设为37.5；// 引入amfe-flexible 根据窗口调整html-font-size大小。（2）propList是设置需要转换的属性，这边*为所有都进行转换。postcss-pxtorem：将px转换为rem。2.创建postcss.config.js配置文件。如果出现报错，降低版本。

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

移动端适配方案

最新发布

m0_51429350的博客

05-16

786

VW/VH适配方案是一种基于视口比例的响应式布局方法，通过将设计稿尺寸按比例转换为视口单位（vw/vh），实现元素尺寸随屏幕自动适配。的响应式布局方案，广泛用于解决不同屏幕尺寸的适配问题。以下是详细的实现步骤、原理及注意事项。在Vue/Vite项目中配置全局SCSS变量，实现样式自动适配（需配置。开发前需明确UI设计稿的分辨率（如1920×1080。‌：直接按设计稿像素开发，编译自动转为vw单位。缺点：维护成本高，需预设多个断点。：PostCSS自动转换（工程化推荐）对应不同屏幕宽度的合理像素值。

手牵手系列之vue自适应插件px2rem

君子不器

10-15

1447

前提制作网页时，通常会要求适应各种的屏幕尺寸。因此就要求写出来的前端页面是能够自适应的。目前有许多的前端库是支持响应式布局的，比如 bootstrap、element-ui 等组件库。阿里也提供了一套自适应布局方案，就是 lib-flexible。将 px 转为 rem。依赖首先需要安装 vue-cli 脚手架，这里我安装的是 cli3。项目初始化完成后，在项目目录中安装 lib-flexible 和 px2rem-loader。 npm i lib-flexible -S npm

vue转移动端项目自适应 使用postcss-plugin-px2rem

limmt2020的博客

06-08

1214

vue转移动端项目自适应 使用postcss-plugin-px2rem

基于Vue2.x的移动端城市插件

02-08

基于Vue2.x的移动端城市插件，支持拼音和汉字搜索，点击字母滚动到相应城市位置等

从零开始在vue-cli4配置自适应vw布局的实现

11-20

本篇文章将详细介绍如何在 Vue CLI 4 中配置自适应的 vw 布局。 vw (viewport width) 是一种 CSS 单位，它表示相对于浏览器视口宽度的百分比。相比于 rem 布局，vw 布局更简洁，无需额外的库或配置文件。我们可以...

vuewaterfall瀑布流插件自适应PC移动端无需预设置高度

08-10

VueWaterfall瀑布流插件是基于Vue.js框架开发的一款组件，专为实现PC和移动端的瀑布流布局设计。瀑布流布局是一种流行的设计模式，尤其在展示图像或内容时，能够提供良好的视觉效果和用户体验。VueWaterfall插件的...

基于vue-cli配置lib-flexible + rem实现移动端自适应

11-30

在移动端Web开发中，为了实现页面的自适应布局，开发者经常使用`lib-flexible`结合`rem`单位来处理不同屏幕尺寸的适配问题。`lib-flexible`库主要是为了解决移动端设备屏幕分辨率差异性导致的显示效果不一致问题。`...

vue轮播图插件vue-concise-slider的使用

08-27

Vue轮播图插件vue-concise-slider是一个轻量级的滑动组件，配置简单，支持自适应/全屏+按钮+分页，同时兼容移动端和PC端版本。下面将详细介绍vue-concise-slider的使用和其特点。一、安装 Vue-Concise-Slider ...

vue 实现自适应屏幕

m0_58405110的博客

01-28

3758

vue 实现自适应屏幕

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 进行配置找到在根目录中的.postcssrc.js，对PostCSS插件进行配置 module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to

vue移动端自适应

Linkea_i的博客

07-18

5138

方案1：直接引入js （自己写的动态改变fontsize的js） function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = ww / 7.5 + "px"; ...

vue全局设置自适应

南山高尔夫的博客

05-08

908

我在以前项目中这样写法是没有报错的，但是我在新项目中同样的写法然后在运行项目的时候报错了。2、在index.html文件中写入下方js方法。百度了下问题，最后成功解决：大神链接-->3、在vue.config.js中进行配置。

最新Vue屏幕自适应插件（数据可视化大屏适配问题完美解决）

zzsxx的博客

01-26

3639

最新 vue插件解决数据可视化 自适应问题

vue pc端 移动端自适应

qq_35478008的博客

07-18

394

2.安装插件 package.json中配置，然后 npm install。1.使用插件amfe-flexible和postcss-pxtorem。3.main.js中引入 amfe-flexible。4.vue.config.js中配置。

关于Vue 移动端适配（px2rem 插件将px转为rem）