VUE项目PC端实现自适应rem

已于 2022-02-16 17:12:04 修改
阅读量536 收藏
点赞数
文章标签： lib-flexible 移动端适配 屏幕适配 flexible.js 前端开发
于 2022-02-16 17:07:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnsunyue/article/details/122967729
版权

提示：用于个人学习
链接：https://www.cnblogs.com/yaosusu/p/13920307.html
注：修改lib-flexible 的那里可以把文件复制下来放在utils中，在main.js文件中引入 import “./utils/flexible/flexible.js”;
在这里插入图片描述

fanwan-7
关注
vue3.0 PC端项目使用自适应
weixin_49587122的博客
03-18 2887
1.引入插件 npm install px2rem-loader -S npm install postcss-px2rem -S 2.在根目录新建文件vue.config.js / 引入等比适配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 100 }) module.exports = { publicPath
vue实现PC端分辨率适配操作
11-20
依赖 项目基础配置使用 vue-cli 生成 自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible // main
Vue实现PC端分辨率自适应
Maggieq8324的博客
12-25 9115
方案 lib-flexible+ px2remLoader lib-flexible：阿里可伸缩布局方案 px2rem-loader：px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem ...
前端 介绍常见两种pc适配方案
最新发布
Lcc的博客
08-27 704
提升用户体验： 通过自适应设计，用户在不同的设备和屏幕尺寸下都能享受到优化的浏览体验，减少了页面缩放和滚动的需要，提高了网站的可用性。
vue项目PC端适配 自适应
Lililiming_的博客
02-08 1219
vue项目PC端适配 自适应
vuepc端实现数据加载_VUE项目PC端实现自适应rem
weixin_42499067的博客
01-12 266
VUE项目PC端实现自适应rem由于项目设计搞是采用的1920*1080的尺寸；项目也基本快做完了，用的1920*1080的尺寸；现在要实现自适应；我这边选择的是rem自适应；当然你也可以用@media多媒体；也可以用写几个适应不同尺寸的css样式；按需引入；这里我采用的是rem：步骤：一：安装lib-flexible$ npm install lib-flexible --save二·、在ma...
vue实现PC端rem自适应适配。
weixin_48674314的博客
08-09 4096
安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible。依赖： 项目基础配置使用vue-cli2生成 自适应方案核心： 可伸缩布局方案lib-flexible。 px转rem：px2rem，它有webpack的loader px2rem。 开始： 使用npm 安装 lib-flexible和px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之后还需要在项目的入口文件 mai...
vue项目pc端屏幕自适应
08-25
在Vue项目中实现PC端屏幕自适应可以按照以下步骤进行操作： 第一步：在代码中使用px作为单位，并根据设计稿的尺寸来进行还原。这样，不同的电脑屏幕大小会根据宽度进行等比缩放，实现自适应效果。 第二步：在根...
详解vue中移动端自适应方案
10-17
在Vue.js中，实现移动端自适应是至关重要的，因为它确保了应用在不同尺寸的设备上都能呈现出良好的用户体验。本文将详细解析两种常见的Vue移动端自适应方案，并提供实践中的具体步骤。 **方案一：自定义动态调整`...
Vue3 + vite PC端自适应
七月
05-29 2839
网上有很多Vue3.0 + vite 自适应PC端的文章，我也尝试过其他方式，只有这种方式在我的项目中没出现各种各样的问题。
Vue利用rem自适应pc端界面
派大星的博客
11-24 1297
vue自适应pc端界面 rem 在项目中安装这两个插件 npm i lib-flexible -S npm i px2rem-loader -D 在main.js中引入 import ‘lib-flexible/flexible.js’ 3.在vue.config.js写配置文件 如果没有就新建一个 // vue.config.js module.exports = { chainWebpack: config => { config.module .rule
vue 如何让PC端不同屏幕大小分辨率自适应（屏幕自适应）（postcss-px2rem、px2rem-loader、lib-flexible）
热门推荐
qq_37831545的博客
07-16 1万+
vue 如何让PC端不同屏幕大小分辨率自适应（屏幕自适应）（postcss-px2rem、px2rem-loader、lib-flexible）
vue pc端网页实现自适应
lth002的博客
01-29 2288
然后就可以直接在css里面使用px了，这个依赖会自动把px转换成rem，包括ui框架里面的，比如elmentui里面的，这样全局的css样式都是rem了，但是有一个缺陷就是行内元素里面的px不能转换，比如。在vite.config.ts文件中引入，我这项目用的是vue3 + vite + ts,你用的是webpack，那就在vue.config.js里面。，但是不建议写在style里面，如果ui框架里面的样式用的是style,那就只能用穿透去修改了。pc端做自适应可以用rem来实现，啥是rem，自己百度。
vue如何实现pc端自适应
51yunOA
04-09 2254
1.命令 2.安装完成以后在main.js引入 3. 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remU...
PC端自适应方案 vue项目
oXiangZuoZuo12345的博客
09-24 1468
vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 // 基准大小 const baseSize = 100 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。 const fontSizeNum= do
关于Vue项目下页面自适应pc端不同分辨率尺寸的方法
kirinlau的专栏
07-07 4800
翻译过来就是在package.json文件中，存在一个叫做peerDependencies（对等依赖关系）的对象，它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包（意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容）；对等依赖关系最好的例子就是React，一个声明式的创建用户界面的JS库。前面我有一篇博客说的是用动态监听body的zoom然后自己设置，或者是window.devicePixelRatio和reansform的scale来处理笔记本等小屏幕的缩放兼容。
PC端自适应
qq_52359462的博客
06-05 1097
pc端自适应 使用amfe-flexible 和 postcss-px2rem依赖包 步骤: 1.安装依赖包 npm install amfe-flexible -S npm install postcss-px2rem -S 2.在main.js中引入 import 'lib-flexible' 3.在vue.config.js中配置 remUnit是根据设计稿自定义的，用设计稿尺寸/10，例如你是在1920的设计稿上设计的 这里就写192 配置内容如下：放在module.exports={}里 cs
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值