简单的移动端rem布局方法
2017-06-28 10:26
507 查看
为根元素的html设置font-size的字体大小,根据屏幕的宽度来改变字体的大小,来达到自适应的效果,比如设计图的宽度是750px,那就用750/16=46.875px;一个div的宽度是200px,就是200/46.875=4.27rem,小数太多的情况下可以四舍五入;因为设计图宽度多为750px算起来小数特别多特别麻烦,所以把设计图宽度改成640px,算起来就好多了。
<script type="text/javascript"> //rem根元素设置字体大小 document.documentElement.style.fontSize = innerWidth / 16 + 'px'; onresize = function() { document.documentElement.style.fontSize = innerWidth / 16 + 'px'; }; </script>
相关文章推荐
- 【HTML5移动端开发】[rem + 百分比布局] 加载抖动(高度不一致)解的决方法
- 使用rem实现移动端适配的简单方法
- 谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
- 移动端rem布局的理解
- CSS元素居中布局的简单方法
- python的tkinter布局之简单的聊天窗口实现方法
- python的tkinter布局之简单的聊天窗口实现方法
- android的viewbadger"徽章"任何给定的Android视图,而无需在运行时布局,以迎合在一个简单的方法
- ListView 使用多布局的方法和简单的原理分析
- 移动端自适应布局的高效方法,欢迎批评或指正
- html rem布局,在移动端超级好用,自适应效果非常好!
- Android卡片式布局的简单实现方法
- 对于用户上传不规划Html而导致页面布局错乱的一简单解决方法
- js简单判断移动端系统的方法
- 关于移动端 rem 布局的一些总结
- 移动端rem布局
- 对于用户上传不规划Html而导致页面布局错乱的一简单解决方法
- Android布局中ScrollView与ListView的冲突的最简单方法(listItem.measure(0, 0))
- 【iOS开发-113】在storyboard上用AutoLayout,纯代码实现AutoLayout布局方法以及简单动画
- 我的移动端网页搭建01——简单布局01(header-content-footer-navbar)