h5自适应布局
来源:互联网 发布:ssh毕业设计2017源码 编辑:程序博客网 时间:2024/06/05 14:48
问题一,分辨率Resolution适配:
不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。
问题二,单位英寸像素数PPI适配:
使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。
问题三,设备像素比例DPR适配:
1物理像素在
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale
参考:
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html
https://github.com/amfe/lib.flexible
demo如下:
<!doctype html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>移动h5自适应布局</title> <style> /*320px布局*/ html{font-size: 100px;} body{font-size: 0.14rem;/*实际相当于14px*/} body{ padding:0; margin:0; } .div2{ font-size:0.14rem; } .div3{ width:3rem; height:3rem; border:1px solid #000; box-sizing:border-box; } .div4{ margin-top:0.1rem; width:2rem; height:2rem; border:1px solid #000; box-sizing:border-box; } .img1{ width:3.2rem; } </style></head><body> <div class="div2">动态更改html元素大小</div> <div class="div3"></div> <div class="div4"></div> <img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" /></body><script>// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/(function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; }; // Abort if browser does not support addEventListener if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签 (function(){ return; var dpr = scale =1; var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; // var metaEl = ""; metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } })(); })(document, window); </script></html>
阅读全文
0 0
- 移动h5自适应布局
- 手机H5自适应布局
- h5自适应布局
- hjr技巧-h5手机页面实现自适应布局
- h5布局
- h5文字自适应
- H5移动页面自适应
- H5自适应方案
- 使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
- 自适应布局
- 自适应布局
- 自适应布局
- 自适应布局
- 自适应布局
- 自适应布局---自适应宽度
- 【转】android webview自适应屏幕,H5自适应
- H5-WebApp 自适应方案 - rem
- 利用rem实现h5自适应
- ceres库编译安装ubuntu16.04
- 数据结构--栈
- 【java学习】java锁
- HttpUrlConnection用get和post请求发送参数
- 【廖雪峰Python习题集】filter
- h5自适应布局
- struts2 用jxl 导出excel
- js基础系列之初识函数
- Linux下Oracle静默安装(无界面安装)
- 爬虫代理
- mac 卸载pkg安装包
- Git的使用场景
- 详解HttpURLConnection
- 从Watson看AI平台的架构设计