HTML5实现移动端之-rem布局
2017-05-25 18:15
681 查看
移动端rem布局
1.原理
rem相对于html的font-size的大小。根据此原理在不同设备下设置不同的font-size,显示的效果如出一辙,从而达到自适应的效果。
2.举例
3.方法
1.根据媒体选择器设置html元素的字体大小.
2.使用js设定html元素字体大小
使用js设定字体大小的好处就是不用挨个列举设备大小。
1.原理
rem相对于html的font-size的大小。根据此原理在不同设备下设置不同的font-size,显示的效果如出一辙,从而达到自适应的效果。
2.举例
html{ font-size:16px; } .area{ width:10rem; height:5rem; } 这时的.area的宽度就是160px,高度就是80px;
3.方法
1.根据媒体选择器设置html元素的字体大小.
@media only screen and (min-width: 320px) { html{ font-size: 20px; } } @media only screen and (min-width: 640px) { html{ font-size: 30px; } } 假定:一个页面的宽度是 10rem; 在第一种设备下的宽度是200px;然而在第二种设备下的宽度变成了300px; 使用媒体选择器要挨个列举出不同设备的大小。需要列出用户使用的各种设备大小。
2.使用js设定html元素字体大小
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement;//获取文档的根元素 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth<=320){ docEl.style.fontSize = '20px';//屏幕小于320根元素字体大小恒为20px; }else{ docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//屏幕大于320根元素大小根据一定比例大小变化。 } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); /*DOMContentLoaded文档加载完成不包含图片资源 onload包含图片资源*/ })(document, window); </script>
使用js设定字体大小的好处就是不用挨个列举设备大小。
相关文章推荐
- 【HTML5移动端开发】[rem + 百分比布局] 加载抖动(高度不一致)解的决方法
- 从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局,极其重要)
- 项目开发之rem加媒体查询实现移动端布局
- Html5移动端页面自适应布局详解(阿里rem布局)
- html5如何利用rem实现自适应布局
- 从零开始前端学习[39]:html5中的弹性布局二(移动端响应式实现各种布局,极其重要)
- 移动端HTML5实现文件上传功能【附代码】
- javascript html5移动端轻松实现文件上传
- jQuery+HTML5美女瀑布流布局实现方法
- jQuery+HTML5美女瀑布流布局实现方法
- rem实现移动端自适应页面
- 移动端HTML5实现文件上传
- javascript html5移动端轻松实现文件上传
- webapp新体验Rem实现移动端网页适配详解资源
- 移动端HTML5实现打电话,发短信,发邮件,文件上传
- rem测试用实现移动端自适应页面
- 关于移动端 rem 布局的一些总结
- 附两个自己认为比较重要的链接地址(移动端的position:fixed,flexbox实现垂直居中布局)
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方案
- jQuery实现瀑布流布局详解(PC和移动端)