首页 > 代码库 > rem.js移动布局实例教程
rem.js移动布局实例教程
最近想买需要开发微站，微信公众号内嵌入的移动web，总结方法可以使用css3直接使用百分比布局，也可以使用bootstrap做响应式布局等多种方法，个人感觉看项目需要，笔者使用rem.js进行移动前端布局，感觉容易接触，挺好用，下面简单介绍一下相关知识。
先上效果图：
实例下载地址：http://www.kwstu.com/ResourcesView/kwstu_201707311542353051
1、首先准备rem.js文件，直接上文件，此文件网上可以下载到。
!newfunction () { var a = this; a.width = 750, a.fontSize = 100, a.widthProportion = function () { var b = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / a.width; return b > 1 ? 1 : b }, a.changePage = function () { document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + a.widthProportion() * a.fontSize + "px !important") }, a.changePage(), window.addEventListener("resize", function () { a.changePage() }, !1)};上面代码配合标准css文件，可以达到如下效果：
前端ps设计文件750像素即可，750应该是iphone 6p的屏幕尺寸，布局中单位映射关系如下：750px等同于7.5rem；30px等同于.3rem；布局方法跟pc端div+css一样，单位用rem即可，做出来的页面有自动缩放效果，以此达到适应移动的不同屏幕需求。
核心css代码如下：
html { font-family: "microsoft yahei","宋体"; -webkit-text-size-adjust: 100%; font-size: 100px;}body { margin: 0; max-width: 750px; min-height: 100%; min-width: 320px; margin: 0 auto; color: #666666; background-color: #fff; -webkit-overflow-scrolling: touch; font-size: .3rem;}* { -webkit-box-sizing: border-box; box-sizing: border-box;}h1, h2, h3, h4, h5, form, p, ul, input { margin: 0px; padding: 0px;}input, textarea { font-family: "microsoft yahei","宋体"; font-size: .27857142rem; color: #666666;}li { padding: 0px; margin: 0px; line-height: 180%; list-style-type: none;}:focus { outline: 0;}.substring { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.nowrap { white-space: nowrap;}.clear { clear: both; height: 0px; font-size: 0px; line-height: 0px;}
配合上面css代码即可。
rem.js移动布局实例教程
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。