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

最新推荐文章于 2024-05-24 10:50:41 发布
最新推荐文章于 2024-05-24 10:50:41 发布
阅读量4w 收藏 41
点赞数 6
分类专栏： 前端 文章标签： 前端 移动端适配 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pwc1996/article/details/75738725
版权
前话好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）所以把我学到的一个小知识点写下来，也分享给前端新手们。正文0x00 大概说明做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。很多时候UI给的设计图只有一份，还是按照iphone6设计的，这就让前端适配其他例如
摘要由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
关注
  • 6
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
移动端适配rem方案、postcss-pxtorem+css中二倍图，三倍图的使用
muzidigbig的博客
04-24 6851
做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。这个问题我们可以使用相对单位rem。那么什么是 rem？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。设置html的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。 uniapp 单位rpx ，设计稿尺寸px处理方式
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 使用lib-flexible适配PC端（rem）+ unocss转px
最新发布
想飞上天和太阳肩并肩
05-24 220
(node_modules\lib-flexible\flexible.js 大概在69行的refreshRem()函数)在node_modules依赖文件中找到flexible.js，修改 refreshRem() 函数。代码直接使用rem单位不方便阅读，安装postcss-px2rem插件可以自动把px转成rem。本文转载自：https://www.jianshu.com/p/9d05bca7c59d。在 main.js中直接引入lib-flexible。在vue.config.js中配置css。
lib-flexible 移动端适配
samll_redhat的博客
11-07 337
移动端适配lib-flexible postcss-pxtorem
vue项目中使用lib-flexible解决移动端适配的问题
热门推荐
yanzhi的博客
05-26 2万+
第一部分：项目中引入lib-flexible一、项目中安装lib-flexible$ npm install lib-flexible --save二、在项目的入口js文件中引入lib-flexibleimport 'lib-flexible'通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。lib-flexible会自动在html的head中添加一个meta n...
lib-flexible解决移动端适配
唐僧洗头用飘柔
07-08 200
移动端适配方案lib-flexible
vue适配移动端（lib-flexible + px2rem-loader）
qevfnc的博客
05-28 213
搭建一个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 在项目目录下安装适配依赖 安装（...
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
详解移动端h5页面根据屏幕适配的四种方案
11-21
在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible） 淘宝的可...
使用Flexible实现手淘H5页面的终端适配1
08-03
《使用Flexible实现手淘H5页面的终端适配1》 在移动互联网时代，H5页面已经成为电商领域不可或缺的一部分，特别是在手淘这样的大型购物平台上。本文将深入探讨如何利用Flexible库来实现手淘H5页面的多终端适配，...
h5移动端的完美适配
08-10
本文将深入探讨如何实现H5移动端的完美适配，主要关注其中的一种解决方案：百分比布局，并结合JavaScript与rem单位进行混合移动开发。 首先，百分比布局是H5移动端适配的基础，它允许元素的尺寸根据父元素的尺寸...
移动端手机和平板适配解决方案
03-25
在H5移动端开发中，适配方案通常涉及以下几个关键技术点： 1. **响应式设计（Responsive Design）**：响应式设计是确保页面在不同屏幕尺寸上自适应的关键。通过使用CSS3的媒体查询（Media Queries）可以定义不同...
页面自适应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-cli3项目使用lib-flexible + postcss-px2rem实现页面自适应
q1004124842的博客
11-01 467
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 7847
前言：有时候我们要用到屏幕灵活自适应，就不能将页面高度写死；所以怎么办呢？需要引入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 513
一，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中...
手机淘宝——flexible.js 移动端自适应方案
熊宗的博客
07-08 2506
一，flexible.js 的使用方式： github地址：https://github.com/amfe/lib-flexible 官方文档地址：https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 （一），引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" >
移动端适配方案 flexible.js
05-15 426
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种相对来说让人比较满意的解决方案，尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。 flexible.js 之旅 flexible.js 的作用就是让你在不同的终...
pc端使用 lib-flexible 和 postcss-px2rem
09-09
lib-flexible是一个用于移动端适配的库，它可以根据设备的屏幕大小动态调整HTML的字体大小，以实现页面元素的自适应。在PC端使用lib-flexible可能并不常见，因为PC端的屏幕尺寸相对固定，不像移动设备那样多样化。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值