移动端布局
2017-02-21 19:39
288 查看
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配。
通过为
示例:
· 定义页面内容的字体大小
对于一些符合标准的dpr值(只要是整数,例如:1,2,3)等,都会为
示例代码:
具体代码
(function(win,doc){ var timer = null, html = doc.documentElement, baseWidth = html.dataset.basewidth*1 || 640, metaEl = document.querySelector('meta[name="viewport"]'), event = 'onorientationchange' in win ? 'onorientationchange' : 'resize'; if(!metaEl){ metaEl = document.createElement('meta'); metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0'); html.firstElementChild.appendChild(metaEl); } function layoutCalc(){ var width = html.getBoundingClientRect().width, ratio = width / baseWidth * 100, devicePixelRatio = window.devicePixelRatio, rem = ratio < 100 ? ratio < 50 ? 50 : ratio : 100; if(!/\.\d+/.test(devicePixelRatio.toString())){ html.dataset.dpr = devicePixelRatio; } html.style.fontSize = rem + 'px'; } win.addEventListener(event,function(){ clearTimeout(timer); timer = setTimeout(layoutCalc,300); },false); win.addEventListener('pageShow',function(e){ if(e.persisted){ clearTimeout(timer); timer = setTimeout(layoutCalc,300); } },false); layoutCalc(); }(window,document));
使用说明:
· 自定义基准页面尺寸通过为
html标签添加
data-basewidth属性来指定基准页面的尺寸。
示例:
<html data-basewidth="750" > ... </html>
· 定义页面内容的字体大小
对于一些符合标准的dpr值(只要是整数,例如:1,2,3)等,都会为
html标签再附加一个
data-dpr属性,然后开发者可以通过该属性来结合CSS规则,从而实现对于不同dpr情况下,对内容字体大小的调整。
示例代码:
html[data-dpr="1"] .dpr-text{ font-size:12px; } html[data-dpr="2"] .dpr-text{ font-size:24px; } html[data-dpr="3"] .dpr-text{ font-size:36px; }
<p class="dpr-text">测试文字</p>
相关文章推荐
- 移动端布局笔记
- 精通移动端布局 - 概念篇 -
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
- 你用过媒体查询,或针对移动端的布局/CSS 吗?
- 精通移动端布局 - 实践篇 -
- [01]项目实战-移动端流体布局
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
- 移动端宽高自适应布局解决办法
- 移动端布局、rem布局、手淘团队flexible.js、zoom缩放
- 移动端flex 经典布局
- 关于移动端rem 布局的一些总结
- 移动端自适应布局解决方案——rem
- 项目开发之rem加媒体查询实现移动端布局
- 移动端网页 rem 自适应布局
- 移动端list布局,左边固定,右边自适应
- 移动端web app自适应布局探索与总结
- 移动端Flex 布局新旧混合兼容
- html5 移动端单页面布局
- 移动端自适应布局之-----rem单位的使用
- 移动端布局方案 网易