教你如何用 lib-flexible 实现移动端H5页面适配

最新推荐文章于 2024-09-26 16:52:59 发布
最新推荐文章于 2024-09-26 16:52:59 发布
阅读量4w 收藏 41
点赞数 6
分类专栏： 前端 文章标签： 前端 移动端适配 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pwc1996/article/details/75738725
版权
本文介绍了如何使用阿里巴巴的lib-flexible库进行移动端H5页面适配，详细讲解了引入lib-flexible、计算rem值的方法，并通过实际例子展示了不同分辨率下的页面效果。
摘要由CSDN通过智能技术生成

前话

好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。

这是我的github，欢迎前端大大们和我一起学习交流
https://github.com/pwcong

最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）

所以把我学到的一个小知识点写下来，也分享给前端新手们。

正文

0x00 大概说明

做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。

很多时候UI给的设计图只有一份，还是按照iphone6设计的，这就让前端适配其他例如6plus或安卓等其他移动端头疼。

还好，阿里巴巴2015年底公开了其成熟的适配方案，lib-flexible，至于其可靠性可参考每年天猫活动的移动端页面。

这个方案的用法大概是这样的，HTML 头部引入 lib-flexible 的样式和js库，容器或组件宽高主要使用单位 rem ，字体大小则不变仍然使用单位 px。

还有一个约束是，因为只面向移动端，因此我们限制最外层包裹的div最大宽度为 640px

我这里只简单介绍怎么使用 lib-flexible 实现移动端适配，如果需要深入解释的知识，请阅读如下文章：
https://github.com/amfe/article/issues/17

0x01 引入 lib-flexible

最新的库文件可以到这里下载：
https://github.com/amfe/lib-flexible

clone 下来后在 build 目录下找到 flexible.css 和 flexible.js 在HTML头部引入即可，例如：

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <title>lib-flexible demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

        ...
最低0.47元/天 解锁文章
Pwcong
关注
专栏目录
vue项目中使用lib-flexible解决移动端适配的问题
一个来自外太空的游客
10-10 862
第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible $ npm install lib-flexible --save 二、在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添...
vue移动端h5适配解决方案(lib-flexible+px2rem-loader)
光
06-21 3771
先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端 配置 安装1：npm i px2rem-loader --save -dev 安装2：npm i lib-flexible --save 配置： build/utils....
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
lib-flexible 移动端适配
samll_redhat的博客
11-07 376
移动端适配lib-flexible postcss-pxtorem
WinCC_flexible_SMART_V3SP1、SP2和WinccV7.3、WinccV7.4下载地址
最新发布
gitblog_06693的博客
09-26 429
WinCC_flexible_SMART_V3SP1、SP2和WinccV7.3、WinccV7.4下载地址 【下载地址】WinCC_flexible_SMART_V3SP1SP2和WinccV7.3WinccV7.4下载地址 WinCC_flexible_SMART_V3SP1、SP2和WinccV7.3、WinccV...
页面自适应lib-flexible使用
起风了
07-02 1万+
https://www.jianshu.com/p/8e5d2ef6ccea 1.安装flexible npm install lib-flexible --save 2.引入flexible 在项目入口文件main.js中添加如下代码，引入flexible import 'lib-flexible' 3.px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 4.安装px2rem-loader npm install px2rem-loader --save
vue适配移动端（lib-flexible + px2rem-loader）
qevfnc的博客
05-28 237
搭建一个vue项目 全局安装vue-cli npm install --global vue-cli 创建一个基于webpack模板的新项目 vue init webpack “name” 如：vue init webpack my-vue 进入项目目录 cd “name” 如：cd my-vue 并安装依赖 npm install 在项目目录下安装适配依赖 安装（...
详解移动端h5页面根据屏幕适配的四种方案
11-21
在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible） 淘宝的可...
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
lib-flexible解决移动端适配
唐僧洗头用飘柔
07-08 223
移动端适配方案lib-flexible
Vue移动端用淘宝弹性布局lib-flexible插件做适配，带你碾压面试官的男人
2401_84138785的博客
04-18 820
前端资料汇总框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
vue3+vite 用lib-flexible适配移动端及大屏方案
weixin_50379372的博客
09-23 2879
lib-flexible是淘宝项目组开源的一个项目，lib-flexible和px2rem-loader一起做适配方案，可以实现自动将css中的px转换成rem。从此段源码中我们不难看出，当屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540这个特定值的时候，那么就不再进行适配了。那么我们如何解决这个问题呢？在上述源码中，进行修改。在build/utils.js中，找到exports.cssLoaders，作出如下修改。在main.js/main.ts中引入lib-flexible。
Vue移动端适配（lib-flexible的使用）
qq_43610311的博客
03-08 997
Vue移动端适配（lib-flexible的使用）起步，lib-flexible安装金牌辅助px2rem-loader 起步，lib-flexible安装 1.安装lib-flexible 项目根路径 npm install lib-flexible -s 2.使用lib-flexible main.js文件中引入 import ‘lib-flexible’ 浏览器按F12有如下效果即可。 金牌辅助px2rem-loader lib-flexible 一般不会独立使用，而是搭配 px2rem-loader
vue项目移动端兼容，vue项目使用lib-flexible做移动端项目兼容，lib-flexible做H5移动端兼容
05-11 522
项目使用的 VUE，cli 2.+ webpack 模板，没使用 VUE 的请 【看这里：原生html页面使用lib-flexible】 安装 lib-flexible 依赖 npm install --save lib-flexible 安装 px2rem-loader 依赖 npm install --save px2rem-loader 全局引入 lib-flexible //main.js 里面引入 import 'lib-flexible' 配置 px2rem-loader // bui
vue-cli3项目使用lib-flexible + postcss-px2rem实现页面自适应
q1004124842的博客
11-01 499
1. 安装依赖 yarn add lib-flexible postcss-px2rem -S 2. main.js引入lie-flexible import "lib-flexible"; 注: lie-flexible的引入文件里对屏幕的范围是需要进行修改的,默认最大屏幕宽度是540 function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width /
vue使用lib-flexible实现屏幕适配
weixin_44582077的博客
08-01 8225
前言：有时候我们要用到屏幕灵活自适应，就不能将页面高度写死；所以怎么办呢？需要引入lib-flexible使用。引入方法及配置如下所示： 注：此方法是针对vue2.X版本配置的。 1.npm install lib-flexible -S //安装lib-flexible 2.import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用' 3.将vue项目下的index.html文件里面的一行代码注释掉，否则lib-flexible可能不会起作用： 4.在no
flexible.js + makegrid.js 自适应布局
weixin_33895695的博客
11-17 544
一，flexible.js 的使用方式： （一），引用方式 1，引用cdn地址 &lt;script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"&gt;&lt;/script&gt; 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中...
VUE中使用lib-flexible
热门推荐
Mr.Yuan
03-28 1万+
VUE中使用rem lib-flexible 安装lib-flexible npm i lib-flexible --save 在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 在项目根目录的index.html 头部加入手机端适配的meta的代码 &amp;lt;meta name=&quot;vie...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值