rem.js移动布局实例教程

Posted 2020-10-02

最近想买需要开发微站，微信公众号内嵌入的移动web，总结方法可以使用css3直接使用百分比布局，也可以使用bootstrap做响应式布局等多种方法，个人感觉看项目需要，笔者使用rem.js进行移动前端布局，感觉容易接触，挺好用，下面简单介绍一下相关知识。

先上效果图：

实例下载地址：http://www.kwstu.com/ResourcesView/kwstu_201707311542353051

1、首先准备rem.js文件，直接上文件，此文件网上可以下载到。

!new
function () {
    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代码即可。