vue-cli引入flexible

最新推荐文章于 2024-09-05 23:45:00 发布

原创最新推荐文章于 2024-09-05 23:45:00 发布 · 898 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue rem #vue移动端自适应

vue2.x 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何在Vue项目中使用lib-flexible进行移动端适配，并集成px2rem插件实现响应式布局，包括安装lib-flexible、在main.js中引入、添加meta配置以及px2rem集成步骤。

一、安装lib-flexible

npm i lib-flexible --save

二、在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

三、在项目根目录的index.html头部加入移动端适配的meta配置

四、集成px2rem 插件，见另一篇文章，vue集成px2rem

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zeroyulong

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

s13166803785的博客

01-18

841

这篇文章主要介绍了移动端自适应flexible.js使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。由于用了less，事先定义了一个变量 @font-size-base: 75;那么就使用 height: 98rem / @font-size-base;-- 去掉meta，交给flexible.js自动处理 -->// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案。// 其他设备下，仍旧使用1倍的方案。

vue-cli使用flexible

青年码农

02-07

379

以前项目上用到这个，网上教程很多，但是说法都不一样，自己总结的，如果有不对的地方可以提出来，vue-cli flexible1、index.html引入flexible <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></scr...

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

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

qq_35515563的博客

03-18

339

安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码，引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2r...

angular2里引入flexible.js（rem的布局）

web

04-26

1172

今天想实现页面的自适应，本来用的是栅格，但效果不理想，就想起了rem布局。以前使用rem布局，都是在原生html里，还没在框架里使用过，百度没百度出来，就自己琢磨，不知道方法规范不规范，反正成功了，操作如下： 1、下载flexible.js 2、引入到angular项目里 3、根据自己的需要修改细节 3.1、在flexible.js里修改每份的像素， 3.2、引入cssrem插件，在设置里设...

vue.js vue-cli配置移动端自适配（引入flexible）

GUK

05-05

3575

1.安装lib-flexible npm i lib-flexible --save 2.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 3.在项目根目录的index.html 头部加入手机端适配的meta的代码 &lt...

vue引入弹性布局

weixin_38647157的博客

03-21

752

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-cli配置flexible过程详解

10-16

本文详细介绍了如何在使用Vue CLI创建的Vue项目中配置flexible.js以及px2rem-loader，以便实现移动端的自适应布局。以下是根据提供的文件内容总结出的知识点： 1. **flexible.js的介绍与作用** flexible.js是一个轻...

vue-cli3-template:基于 vue-cli 搭建的前端模板

05-27

移动 web 的适配方案：引入了 postcss-pxtorem 及 lib-flexible，可以自由地用 px 去开发常用的 js 工具类：引用 style-resources-loader：全局注入相关的less文件，如通用的 variable及 mixins等常用的 Less 的 ...

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

08-28

基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应 Vue-CLI是 Vue.js 的标准开发工具，提供了许多功能强大且灵活的配置选项。 Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式...

手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem

面对疾风吧

08-17

8973

1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做，保证可以完成哦！有图有代码，简单明了可复制！如果能帮助到你，还望能给个赞+关注，鼓励一下！谢谢！ npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-sc.........

vue2如何使用flexible.js

最新发布

weixin_54048131的博客

09-05

904

首先，你需要安装。如果你正在使用 npm 或 yarn 来管理你的项目依赖，可以通过下面的命令来安装：bash深色版本。

在vue中使用移动端vant组件，按需引入组件和自适应框架 lib-flexible使用

qq_43341001的博客

01-21

861

/** * 在vue中使用移动端vant组件，按需引入组件 * 在vue中使用自适应框架 lib-flexible */ import { ModuleKind } from "typescript"; // 在目录文件为 babel.config.js文件中 ModuleKind.exports ={ presets:[ '@/vue/cli-plugin-babel/preset' ], plugins:[ [ '

vue移动端适配---flexible.js

RN_David的博客

04-02

767

vue移动端适配—flexible.js 最近在自学vue，在做项目时遇到移动端适配问题，通过努力找到了一个非常适合的新的淘宝适配插件。废话不多说使用步骤：安装 flexible npm i lib-flexible 安装px2rem-loader npm install px2rem-loader --save 在项目入口文件main.js 中引入lib-flexible 去掉目标文件的i...

vue 移动端适配flexible.js使用方法

weixin_47151361的博客

05-09

5793

原理： 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=

vue cli引入flexible.js模块化移动端适配

Museions的开心博客

05-23

3363

vue页面自适应,配置 flexible安装 lib-flexible在命令行中运行如下安装：1npm i lib-flexible --save引入 lib-flexible在项目入口文件 main.js 里引入 lib-flexible12// main.jsimport 'lib-flexible'添加 meta 标签在项目根目录的 index.html 中添加如下 meta1<meta name="...

flexible.js-移动端H5页面适配应用

weixin_43755104的博客

07-25

628

文章目录flexible.js仓库vscode插件 px转rem插件 cssrem步骤1. 下载flexible.js步骤2.页面引入步骤3.把视觉稿中的px转换成rem 前端页面适配有两大方向：一是布局适配，可以使PC、手机、平板共用一份代码，实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配，面对的是移动开发中设备不同分辨率和不同尺寸，最大限度还原设计稿效果。 flexible.js是高清适配的一种方法，它通过javascript根据不同设备的dpr值和设备宽度

Vue.js——Bootstrap flex布局并实时刷新传感器数据

FranzLiszt的博客

10-19

1020

实时刷新传感器数据效果图效果视频Bootstrap flex布局使用NPM安装Bootstrap布局逻辑图布局分析实时刷新数据定义字段绑定字段设置心跳开启心跳设置钩子函数获取数据结束心跳尾言效果图效果视频 Bootstrap flex布局使用NPM安装Bootstrap 第一步、输入如下代码安装Bootstrap npm install bootstrap@3 第二步、在main.js文件导入引用 import BootstrapVue from 'bootstrap-vue' import

vue pc端自适应各个屏幕

小菜张的博客

06-10

6504

使用的方案 lib-flexible-computer + px2remLoader + postcss-px2rem 查阅的其他人的链接 http://www.codebaoku.com/it-js/it-js-205513.html 强推！！！https://javaforall.cn/127968.html https://blog.csdn.net/waillyer/article/details/108239340 https://blog.csdn.net/qq_38902230/articl

基于flexible、cssrem插件的Vue项目前端响应式布局及框架

Sunnyztg的博客

07-04

1941

本文介绍了如何使用flexible和cssrem插件实现Vue项目的前端响应式布局。通过使用这两个插件，我们可以轻松地适配不同屏幕尺寸的设备，提供更好的用户体验。本文还提供了一个示例代码，以主页面分成五块区域为例，演示了如何使用这两个插件进行布局。