H5移动端适配（flexible.js）

最新推荐文章于 2024-07-19 15:11:28 发布
最新推荐文章于 2024-07-19 15:11:28 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： html5学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/77368621
版权
本文介绍了H5移动端适配的流程，通过设定UI设计稿尺寸为基准，计算屏幕与设计稿的比例，利用rem进行适配。具体实现中，以全屏幕显示为例，展示了如何根据iPhone6的屏幕像素值计算rem的大小，从而实现不同设备的响应式布局。
摘要由CSDN通过智能技术生成

流程：
1、设定ui设计稿的尺寸大小为基准
2、算出当前屏幕大小
3、跟ui设计稿算出比例值
4、然后直接用设计稿上标的值*（3、跟ui设计稿算出比例值）

remFontSize.js

(function flexible(window, document) {
    //这里直接以iphone6的尺寸为设计稿
    var BASE_WIDTH=750;
    var BASE_HEIGHT=1334;
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12</
最低0.47元/天 解锁文章
vv_小虫
关注
专栏目录
html5页面移动端适配JS插件
11-30
html5页面移动端自适应插件； html5页面适配插件，移动端自适应； m-base.js
H5 移动端 网页端适配（js+rem）
weixin_41618917的博客
01-25 2680
H5 移动端 网页端适配（js+rem） 业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但 是还是会出现字体和布局不会等比缩放的情况，后来找到一种 js代码针对根元素去做的缩放配置，加上rem和这个js的设置就 能做到等比缩放。 下载插件，并修改比例 （如果ui尺寸是750就改50 375改25），修改完重启vscode 重启，效果图： 2. 新建一个index.js，把下方代码复制进去,即可使用。 //适配兼容 (function (doc, win) {
一些常见的移动端适配方案，你了解吗？
最新发布
2401_83384536的博客
07-19 451
移动端设备的尺寸很多，而 UI 设计稿一般只会基于一个尺寸（一般是 375px 或 750px ）进行设计。目前移动端适配方案有多种，本文将介绍一些具有代表性的适配方案。目前比较推荐的移动适配方案是 rem&vw，了解其中的适配原理对于前端而言是非常重要的，相关问题也经常出现在面试题中。熟练使用插件也能给我们的工作带来很大的帮助。
移动端适配flexible.js
weixin_30462049的博客
07-22 265
npminstalllib-flexible--save npminstallpx2rem-loader--save-dev rule .use('px2rem-loader') .loader('px2rem-loader') .options({emUnit:37.5}) 正常移动端范围是375到750 我们这样设定就是让1rem为37.5px 相当...
flexible手淘适配H5
08-11
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。
移动端开发自适应方案(flexible)
m0_46057827的博客
12-01 1183
引言 我们在日常开移动端页面时，总是要面临用户有各种各样的机型，屏幕大小的不同，会导致我们在开发机型上开发出来的页面，放在其他机型上，页面就会变形或者变得很丑。为了解决这一问题，淘宝开源了一套移动端适配方案: flexible. 使用 普通引入: 在页面中引入源码 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> 根据设计图的尺寸确定
H5移动端适配 Flexible方案
09-01
《H5移动端适配Flexible方案详解》 在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将...
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
移动端h5自适应适配之flexible.js打假
我的小熊不见了
11-24 3188
移动端h5自适应适配之flexible.js打假 最近做一个移动端的h5适配，在网上找方案基本上都是使用flexible.js，然后顺理成章我也入了这个坑。 引用flexible.js的方式无外乎cdn引入： <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" ></script> 下载文件到本地或者npm安装。 源代码如下： 在引入之后发现遇到了各种奇怪的问题，比
移动端适配方案 flexible.js
荆轲刺秦王
10-08 958
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种相对来说让人比较满意的解决方案，尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。 根据阿里手淘团队发布的可伸缩布局方案amfe-flexible，git地址：https://github.co...
2024年Web前端最新antd table 分页，前端 MVP模式详解
2401_84419493的博客
05-05 503
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。面试本质也是考试，面试题就起到很好的考纲作用。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
Flexible实现H5页面的终端适配
送你一个大西瓜
04-13 399
设计师和前端开发的适配协作基本思路是： 选择一种尺寸作为设计和开发基准 定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果 lib-flexible是什么？ lib-flexible是一个制作H5适配的开源库。点击下载使用方法<script src="build/flexible_css.debug.js"></script> <script sr
flexble css,移动端适配 flexible rem 布局方案全面讲解
weixin_28800247的博客
08-04 501
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。为什么不能直接用 px 进行布局设计师基于 iphone6(375px 逻辑像素) 的页面尺寸给了你一个非常简单的设计稿你很快用如下的代码实现了，在 chrome 控制台打开 iphone6 查看效果，...
Flexible实现H5页面的rem布局适配
weixin_30896511的博客
02-28 116
1、https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html （使用Flexible实现手淘H5页面的终端适配） 2、http://blog.csdn.net/u010377383/article/details/77963973 （Flexible实现手淘H5页面的rem布局适配） 3、http://blog.csdn...
移动端自适应flexible.js的详细介绍解析
Hdmi764287459的博客
08-22 2636
Flexible.js是一款用于web移动端的解决方案。它基于js，能够在不同大小的设备上实现自适应效果。所谓自适应，就是能够针对不同的屏幕分辨率调整相应的字体大小和元素大小。相比于传统的固定布局，自适应能够更好地适应用户的屏幕，增加用户体验。Flexible.js的最大特点是它可以根据设备的像素比动态调整根元素的字体大小，从而实现自适应效果。Auto dpi（viewport-dpi）是近年来移动设备上流行的屏幕像素比概念，而Flexible.js 可以获取设备的dpi来计算缩放的比例，实现自适应布局。
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
weixin_67244432的博客
04-29 2427
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
移动端常见布局
qq_62617602的博客
07-10 986
本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。将不同的终端设备划分成不同的类型，称为媒体类型。
H5移动端适配：Flexible方案详解
H5移动端适配Flexible方案涉及到对物理像素、设备独立像素和设备像素比的理解，以及如何在CSS和JavaScript中应用这些概念来实现高清适配和响应式布局。通过灵活运用这些技术，开发者可以创建出适应多种设备、显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值