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

最新推荐文章于 2021-12-11 22:38:50 发布
最新推荐文章于 2021-12-11 22:38:50 发布
阅读量547 收藏 1
点赞数
分类专栏： 前端 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43755104/article/details/107581041
版权

文章目录

前端页面适配有两大方向：一是布局适配，可以使PC、手机、平板共用一份代码，实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配，面对的是移动开发中设备不同分辨率和不同尺寸，最大限度还原设计稿效果。

flexible.js是高清适配的一种方法，它通过javascript根据不同设备的dpr值和设备宽度为html动态设置font-size，其他元素使用rem做单位。

flexible.js仓库

flexible.js

vscode插件 px转rem插件 cssrem

flexible.js如何实现rem自适应
移动端H5页面高清多屏适配方案

步骤1. 下载flexible.js

步骤2.页面引入

步骤3.把视觉稿中的px转换成rem

RDSunday
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用vue构建移动端h5页面,并将px转换为rem(ts)
juvialoxer的博客
09-01 1167
一、安装 npm install postcss-pxtorem@5.1.1 npm i amfe-flexible -S 二、在main.ts中引入 import 'amfe-flexible/index' 三、在vue.config.js中添加 module.exports = { css: { loaderOptions: { postcss: { plugins: [ req
vue h5页面flexible使用
Miss739999536的博客
05-10 1332
这是手机淘宝的移动端屏幕适配的解决方案1、vue-cli安装flexiblenpm i li-flexible --save-dev2、main.js引用 import 'lib-flexible'3、安装px2rem-loadernpm i px2rem-loader --save-dev4、修改build文件夹下的utils.js文件const cssLoader = {    loader:...
html5页面移动端适配JS插件
11-30
html5页面移动端自适应插件； html5页面适配插件，移动端自适应； m-base.js
Flexible 应用
weixin_30537391的博客
08-13 100
Flexibl.js 为我们做了一项工作，媒体查询工作，节约了许多操作 举个例子，移动端的页面设计稿是750px，我们自己换算rem单位，比如我想把屏幕划分为15等份，我就750/15=50，然后用所有的像素单位除以50，换算得到的就是rem单位。 但是css不能计算，所以我们使用可编译的less或者scss进行定义变量和计算。Hbuilder x的less编译环境需要安装，在no...
flexible.js淘宝官方h5移动适配解决方案
jia2799897415的博客
11-02 705
flexible.js淘宝官方h5移动适配解决方案. 创建flexible.js , 主要内容为: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexib
H5 移动端 网页端适配（js+rem）
weixin_41618917的博客
01-25 2661
H5 移动端 网页端适配（js+rem） 业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但 是还是会出现字体和布局不会等比缩放的情况，后来找到一种 js代码针对根元素去做的缩放配置，加上rem和这个js的设置就 能做到等比缩放。 下载插件，并修改比例 （如果ui尺寸是750就改50 375改25），修改完重启vscode 重启，效果图： 2. 新建一个index.js，把下方代码复制进去,即可使用。 //适配兼容 (function (doc, win) {
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
H5移动端适配 Flexible方案
09-01
《H5移动端适配Flexible方案详解》 在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将...
详解移动端h5页面根据屏幕适配的四种方案
11-21
这块也可以直接用js实现，后面会提到 具体引入和使用方法，移步github查看，非常详细。 方法二：viewport 的使用 github里边，有提到 viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详细，包括比例、是
flexible.js
01-25
flexible.js 移动自适应插件,rem模式,阿里开发,自适应
flexible.js下载
12-08
移动端web模拟导航可点击 自动滑动 flexible.js下载 资源下载
h5移动端的完美适配
08-10
本文将深入探讨如何实现H5移动端的完美适配，主要关注其中的一种解决方案：百分比布局，并结合JavaScript与rem单位进行混合移动开发。 首先，百分比布局是H5移动端适配的基础，它允许元素的尺寸根据父元素的尺寸...
移动端手机和平板适配解决方案
03-25
在移动端开发领域，适配问题是一项至关重要的任务，特别是在手机和平板设备上，由于屏幕尺寸、分辨率和像素密度的多样性，使得开发者需要采用特定的策略来确保应用或网站在不同设备上都能提供良好的用户体验。...
教你如何用 lib-flexible 实现移动端H5页面适配
热门推荐
pwc1996的博客
07-22 4万+
前话好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）所以把我学到的一个小知识点写下来，也分享给前端新手们。正文0x00 大概说明做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。很多时候UI给的设计图只有一份，还是按照iphone6设计的，这就让前端适配其他例如
H5移动端适配（flexible.js）
vv_bug
08-18 1536
前言：项目终于要结束了，终于是过上了正常上班族的日子了，说多了都是泪啊，感觉短短几个月下来都有点怀疑人生了，怪不得说程序猿是一个吃青春饭的职业，哈哈～就像这只笔一样～～～ 项目开始之前：项目结束这只笔是这样的：哈哈～～进入我们今天的主题哈，项目快结束了，所以每天都在考虑怎么优化之前写的代码，于是看了看之前的网络请求，然后顺便看了看fetch的源码，觉得还是应该把自己理解记录下来～ 大牛略过哈！先看
flexible.js + makegrid.js 自适应布局
weixin_33895695的博客
11-17 510
一，flexible.js 的使用方式： （一），引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中...
移动web开发之自适应布局解决方案二: flexible.js+rem
qq_37635012的博客
12-11 1809
在移动web开发之自适应布局解决方案一: less+媒体查询+rem这个文章里我们学习了自适应的第一种方案，但我们发现这种方法太麻烦，还要我们自己去计算每个元素的rem值，于是我们可以用flexible.js可以解决这一痛点。这是手机淘宝团队推出的移动端适配库，我们再也不用写不同屏幕的媒体查询了，因为这个库做了js处理，其原理是将当前设备划分为10等份，但是不同屏幕设备下，比例还是一致的，我们要做的就是确定好我们当前设备的html字体大小即可，比如设计稿是750px，那么我们就把html字体大小设置为75p
flexible.js 移动端自适应 rem
Your_Smile_的博客
08-24 965
(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() { if (document.body) { d...
flexible.js是如何实现移动端适配的？
最新发布
03-28
flexible.js是一种移动端适配方案，它通过动态设置页面的根元素字体大小来实现适配。具体实现步骤如下： 1. 首先，获取设备的屏幕宽度。 2. 然后，根据设计稿的宽度和设备的屏幕宽度计算出一个缩放比例。 3. 接着，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RDSunday

爱，就供养；喜欢/受益，就打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值