H5移动端适配(flexible.js)
来源:互联网 发布:dnf盒子换装网络中断 编辑:程序博客网 时间:2024/06/04 00:46
流程:
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 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit() { var w1 = docEl.clientWidth / BASE_WIDTH; var h1 = docEl.clientHeight / BASE_HEIGHT; var rem = Math.min(w1, h1); docEl.style.fontSize = rem * 100 + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) }}(window, document))
比如我们需要全屏幕显示:
.wrapper { width: 7.5rem; margin: 0px auto; height: 13.34rem; background-color: antiquewhite;}
设置宽为7.5rem 高为:13.34rem;
公式:
(w1/375)=(x/(iphone6上的像素值y))
x=(w1/375)*y
(w1/375)=我们设置的rem;
所以x=y*rem
阅读全文
0 0
- H5移动端适配(flexible.js)
- vue.js移动端配置flexible.js
- 移动端适配的方案----flexible
- 移动web学习--淘宝 flexible.js
- flexible.js 移动端自适应框架
- flexible.js移动端的适配
- 移动端自适应:flexible.js可伸缩布局使用
- rem自适应布局-移动端自适应必备:flexible.js
- rem自适应布局-移动端自适应必备:flexible.js
- 教你如何用 lib-flexible 实现移动端H5页面适配
- H5移动端适配
- 移动端rem适配(手淘flexible方案)
- 使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
- pageResponse.js - 让H5适配移动设备全家(移动端适配)
- 移动端开发rem单位的格式化js文件flexible.js
- h5在移动端适配经验总结
- 移动端布局、rem布局、手淘团队flexible.js、zoom缩放
- vue移动端flexible.js结合Muse-ui使用的小坑
- Java面试个人整理(手打勿喷,易于个人学习)1
- word2vec
- struts2配置文件struts.xml的存放位置
- AI—五子棋
- 扩展thinkphp5的redis类方法
- H5移动端适配(flexible.js)
- 解决windos平台 adb dos 中文乱码
- 自定义圆形头像框二
- 区块链开发(二)基于以太坊的Mist 客户端安装
- 深入浅出理解python 装饰器
- CUDA均值滤波和中值滤波编程
- gitignore 文件
- 自定义上拉刷新下拉加载ScrollView
- XMind基础教程-主题篇