vue rem移动端自适配-引入flexible

最新推荐文章于 2024-07-28 20:17:15 发布
最新推荐文章于 2024-07-28 20:17:15 发布
阅读量2.7k 收藏 3
点赞数 2
分类专栏： Vue CSS 文章标签： rem 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oucqsy/article/details/79174648
版权
Vue 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
CSS
5 篇文章 0 订阅
订阅专栏

1. 安装lib-flexible

npm i lib-flexible --save

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

import 'lib-flexible/flexible.js'

3. 通过vscode插件cssrem

配置vscode，文件 -> 首选项 -> 设置，在用户设置里添加如下配置

// 基础的font-size, 如果设计图是750标准的，设置成75
"cssrem.rootFontSize": 75, 
// px转rem小数点最大长度
"cssrem.fixedDigits":  2,
// 自动移除0开头的前缀，默认：true
"cssrem.autoRemovePrefixZero": true

4. 写css样式的时候px会自动转换为rem

小乔FEer
关注
专栏目录
vue中移动端rem flexible.js px2rem 通过viewport来适配
冠日的个人博客
05-22 992
1第一种使用px2rem插件 1. 创建： 在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码； (function(){ functiona(){ varb=document.documentElement.clientWidth b=b>750?750:b varc=(b/750)...
vue引入弹性布局
weixin_38647157的博客
03-21 619
1、先安装 postcss-plugin-px2rem 和 lib-flexible2、在main.js引入3、在vue.config.js配置接下来可以在你的项目里使用px，打开浏览器调试工具看看是否转换成rem单位。下面我们来看一个案例。这里我把文字的font-size设置为30px，然后它帮我转成了0.8rem，原因是rootValue配置的37.5，那么30px/37.5=0.8rem，所以你看你页面控制台就是0.8rem。换句话说就是1rem=37.6px，0.8*37.5不就等于30了。
vue项目配置rem
wjw0125的博客
09-09 613
export default function() { // 7.5根据设计稿的横向分辨率/100得来 var deviceWidth = document.documentElement.clientWidth; // var deviceWidth = window.screen.availWidth // console.log(navigator.userAgent) // console.log(deviceWidth) // console.log
黑马头条vue2.0项目实战（一）——项目初始化（移动rem适配）
最新发布
weixin_56370772的博客
07-28 968
创建项目可以根据项目自定义 class 前缀。
vue中使用flexible.js实现屏幕自适应
03-12 4538
一、下载flexible.js cnpm i -S lib-flexible 二、main.js中引入 import 'lib-flexible/flexible.js' 三、在nodemodule/lib-flexible/flexible.js中修改代码如下： function refreshRem() { var width = docEl.getBoundingClientRect().width; // if (width / dpr &gt
vue.js vue-cli配置移动端自适配（引入flexible）
GUK
05-05 3511
1.安装lib-flexible     npm i lib-flexible --save 2.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 3.在项目根目录的index.html 头部加入手机端适配的meta的代码   &lt...
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
总结来说，使用lib-flexible可以解决Vue项目在移动端的布局适配问题，使得开发过程更加高效，并且页面表现更加一致。配合`px2rem-loader`使用，可以进一步简化开发流程，减少人工错误，提高开发者的开发效率。通过这...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式...
基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem
hjh15827475896的博客
10-31 598
基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem 1，安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途： flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scal
vue rem适配_【VUE移动端适配】VUE使用flexible布局
weixin_39633437的博客
11-23 247
配置 flexible安装 lib-flexible在命令行中运行如下安装：npm i lib-flexible --save引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexible// main.jsimport 'lib-flexible' meta 标签处理在项目根目录的 index.html 中根据需求删除如下 meta，采用flexible自动设置...
移动端vue使用的rem配置函数
07-18
移动端使用的rem配置函数，配置简单，使用时只修改一个参数即可
vue项目实现屏幕自适应
weixin_46449736的博客
09-07 8225
一、安装插件 npm i lib-flexible -S 下载淘宝的flexible插件，-S为生产依赖 npm i px2rem-loader -D 下载将px转换成rem的插件，这样在写的时候就可以根据设计稿愉快的使用px啦，这个插件会自动帮我们转换 二、在入口文件main.js将lib-flexible插件引入 三、在vue.config.js中添加配置 module.exports = { chainWebpack: config => { config..
vite安装postcss-pxtorem+amfe-flexible进行移动端自适应
qq_29715077的博客
12-11 1954
一、安装依赖走起 npm install postcss-pxtorem --save-dev npm install amfe-flexible --save-dev 安装成功 ，我的相关版本是 "amfe-flexible": "^2.2.1", "postcss-pxtorem": "^6.0.0", 二、配置 在mian.js中 引入amfe-flexible import 'amfe-flexible' 在vite.config.js中配置postcss-pxtorem ..
vue项目移动端适配(flexible.js)
x_xiNan9416的博客
09-28 844
想要达到页面的自适应通过rem+淘宝的flexible.js 第一步(cmd) 输入命令 npm install lib-flexible --save 第二步(在main.js中引入lib-filexible) import 'lib-flexible/flexible.js' 第三步(在项目根目录注释掉如下标签) <meta name="viewport" content="width=device-width, initial-scale=1.0"> 因为安装flexible会自动生
vue中使用flexible
weixin_45599105的博客
03-13 576
vue中使用flexible
vue移动端项目屏幕适配--flexible rem
moon_tang的博客
08-27 441
开始 首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目 没有安装过 vue-cli 的请先安装 vue-cli 安装所需依赖后安装 lib-flexible 和 px2rem-loader 1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible imp...
vue的rem配置
weixin_42478537的博客
07-22 371
如果在vue中只有单页面需要使用rem，同时不想影响到其他页面，那么可以创建的时候就改变根元素，同时离开页面时重置根元素
Vue-cli3.X、Vue-cli4.X项目中使用px2rem
发育中的前端
03-19 3975
文章目录第一步：安装postcss-px2rem第二步：在 vue.config.js 中添加配置第三步：添加 rem.js文件第四步：引入rem.js文件第五步：重启服务 第一步：安装postcss-px2rem npm add postcss-px2rem 第二步：在 vue.config.js 中添加配置 const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 32 //基准大小 baseSiz
Vue移动端适配：amfe-flexible与postcss-pxtorem实践
本文档主要探讨在移动端使用Vue框架实现完美适配的解决方案。作者基于一个医疗手机端项目的经验，介绍了如何在不同尺寸的屏幕上适应性布局。主要采用的是amfe-flexible和postcss-pxtorem相结合的方法。 amfe-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值