手机端网页自适应解决方案
2016-05-20 14:59
183 查看
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
先贴一段代码由于手机屏幕大小不一。在设计一个手机端页面的时候,我们需要考虑到在每个手机下看到的元素比例一模一样。于是传统的PX 舍弃掉了,采用rem,rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。
于是我们通过一段JS代码,来初始化rem的大小,根据rem来使各个屏幕下的rem大小不同。
相关文章推荐
- android 获取sim一些信息方法如下:
- Android应用开发中自定义ViewGroup的究极攻略
- Android Spinner 简单应用
- 关于android更改版本号和版本代码之后仍然不起作用的原因
- iOS 添加Resource bundle target(静态库中使用图片等资源)
- iOS开发异常warning:***whose view is not in the window hierarchy!
- android中Invalidate和postInvalidate的区别
- bitmapfactory.decodefile 内存溢出(OOM)问题解决方案
- viewDidLoad, viewWillDisappear, viewWillAppear等区别及各自的加载顺序
- iOS中需要查询的设备号, 型号
- android上传图片至服务器
- 浅谈SuperMap iMobile for Android在Android Studio平台开发应用
- iOS学习之——关于何时使用storyborad和xib
- Android Material Design之Toolbar与Palette实践
- iOS学习之—— Notification的使用
- The certificate used to sign “AppName” has either expired or has been revoked. An updated certificate is required to sign and install the application解决
- Android百度地图点聚合功能的子项目点击事件
- iOS学习之——视图切换
- iOS APP上线流程
- iOS应用崩溃日志分析