vue项目移动端适配(flexible.js)

最新推荐文章于 2023-10-08 10:17:10 发布
最新推荐文章于 2023-10-08 10:17:10 发布
阅读量850 收藏 2
点赞数 3
分类专栏： vue 文章标签： vue 编辑器 前端 vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x_xinan9416/article/details/108841838
版权
本文介绍了如何利用flexible.js实现Vue项目的移动端页面自适应。通过四个步骤设置，包括安装flexible，处理meta-viewport标签，使用rem单位，并解决设计稿与实际显示的px转换问题。在app.vue中添加相应样式后，即可进行适配后的样式编写。
摘要由CSDN通过智能技术生成

想要达到页面的自适应通过rem+淘宝的flexible.js

第一步(cmd)

输入命令

npm install lib-flexible --save

第二步(在main.js中引入lib-filexible)

import 'lib-flexible/flexible.js'

第三步(在项目根目录注释掉如下标签)

<meta name="viewport" content
最低0.47元/天 解锁文章
西楠
关注
专栏目录
vue pc响应式+移动端适配flexible.js的使用方法
2201_75491624的博客
05-18 2053
适配pc端和移动端,同时在pc端需要响应式,使用flexible.js一套代码完成多端适配
vue.js移动端配置flexible.js
热门推荐
Coding_Jia的博客
12-21 1万+
适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应1.安装lib-flexible.jsnpm install lib-flexible --save2.在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible'3.px转换rem使用 webpack 的 px2rem-loader,自动将px转换为rem 安装
vue中使用flexible.js实现屏幕自适应
03-12 4549
一、下载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脚手架搭建移动端项目--flexible.js
weixin_30244681的博客
10-26 395
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下，随便一个文件夹下，输入命令行 npm install vue-cli -g 安装完成后，通过 vue -V 查看版本号验证是否安装成功 通过vue-cli 初始化vue项目 输入命令行新建 vue-demo 项目 vue init webpack vue-de...
详解vue.js移动端配置flexible.js及注意事项
01-21
前言 最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。 主体 flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移
移动端适配flexible.js.docx
11-24
移动端适配flexible.js.docx flexible.js 是一个移动端适配方案，旨在解决移动端页面的尺寸适配问题。在移动端开发中，页面的尺寸适配是一个非常重要的问题，因为不同的移动设备屏幕尺寸和分辨率都不同，如何让页面...
vant+vue适配移动端项目，flexible.js
05-05
vant+vue适配移动端项目，flexible.js
flexible.js
华办
05-06 963
flexible https://github.com/amfe/lib-flexible/
基于手淘flexiblejs的Vue组件
08-10
基于手淘 flexible.js 的 Vue 组件
flexible.js下载
12-08
移动端web模拟导航可点击 自动滑动 flexible.js下载 资源下载
flexible.js_flexible.js下载_flexible.js下载_适配js文件_
10-03
可以自动适配的js文件，帮助你做echarts表格时使用。可用作系统。
vue移动端适配---flexible.js
RN_David的博客
04-02 654
vue移动端适配—flexible.js 最近在自学vue，在做项目时遇到移动端适配问题，通过努力找到了一个非常适合的新的淘宝适配插件。废话不多说使用步骤： 安装 flexible npm i lib-flexible 安装px2rem-loader npm install px2rem-loader --save 在项目入口文件main.js 中引入lib-flexible 去掉目标文件的i...
vue中使用flexiblejs和rem布局、媒体查询
qq_43667537的博客
04-24 768
我自己使用的电脑宽度是1920px，开发就按照这个基准进行调试，将1920px分成24份，1920px/24 = 80px ，那么1rem = 80px。或者自己创建flexible.js。
vue适配手淘工具适配(flexible.js , rem适配。详细讲解)
m0_73854403的博客
10-08 433
因为 ， node_modules包是git忽略文件 ，解决方案 找到文件 ，复制到utils文件中。不想下载就在utils , 新建文件 flexible.js , 复制下面代码。在main.js中引入 , 即可 或者 index.html中引入。
vue2.0移动端配置flexible.js
weixin_33909059的博客
04-12 398
最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装flexible.js cnpm install lib-flexible --save 复制代码 2.main.js引入 import 'lib-flexible' 复制代码 3.px转rem,首先我们来安装 cnpm install px2rem-loader --save-dev 复制代码 4...
Vue集成flexiable.js的一种方法
heroicpoem的专栏
03-21 520
可以把flexiable.js文件直接引入。
vue 移动端适配flexible.js使用方法
weixin_47151361的博客
05-09 5512
原理： flexible.js 适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕 操作步骤： 1.安装lib-flexible.js npm install lib-flexible --save 2.在项目入口文件main.js 中引入lib-flexible import 'lib-flexible/flexible' 解释： lib-flexible会自动在html的head中添加一个meta name=
vue2 移动端适配
最新发布
09-07
Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。Vue 2在移动端适配方面，主要涉及响应式布局、单位转换、适配方案等问题。下面简要介绍Vue 2移动端适配的几个关键点： 1. **单位转换**：在移动端开发中，常常使用`px`作为布局单位，但为了更好的适应不同屏幕尺寸，通常会将`px`转换为`rem`。`rem`是相对于根元素`html`的字体大小的单位，这意味着可以通过调整根元素的字体大小来统一控制页面中的尺寸。 2. **viewport设置**：通过设置`viewport`元标签，可以控制页面的布局视口，使其适应不同设备的屏幕尺寸。例如： ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ``` 其中`width=device-width`让布局视口等于设备宽度，`initial-scale=1`设置了初始缩放比例。 3. **媒体查询**：利用CSS的媒体查询可以根据不同的屏幕尺寸应用不同的样式规则。例如： ```css @media (max-width: 768px) { .my-class { font-size: 14px; } } ``` 这样，在宽度小于768像素的设备上，`.my-class`中的字体大小会调整为14像素。 4. **响应式组件**：在Vue 2中可以创建响应式的组件，根据设备的尺寸变化来改变组件的行为或样式。Vue的`v-bind`指令可以绑定一个JavaScript表达式，这使得我们可以通过一些计算来动态调整元素的样式。 5. **第三方库**：存在一些第三方库如`Flexible`、`postcss-pxtorem`等，可以帮助开发者快速实现单位转换和自动适配。 6. **Vue插件**：一些Vue插件如`vux`提供了移动端UI组件，可以简化移动端开发的流程，并且考虑到了移动端的适配问题。 在实现移动端适配时，需要综合考虑以上几点，根据项目需求和设计目标选择合适的适配方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值