flex和rem实现手机端页面案例

登录页面案例代码：

html代码：

	
	
	




	

		
登录页面
	
	

		
		
		登录	
	
	

		没有账号，去注册
	

css代码：

*{
	font-family: "微软雅黑";
}
body,html{
	margin:0;
	padding:0;
	background: #fcfcfc;	
}
.login{
	display: flex;/*flex布局*/
	flex-direction:column;/*主轴方向垂直方向，从上到下*/
}
.loginheader{
	height: 1.2rem;
	margin-top:1.6rem;
}
.loginheader h2{
	font-size: 0.52rem;
	color: #fff;
	font-weight: 500;
	color: #BA55D3;
	text-align: center;
}
.logincontent{
	margin-top:0.3rem;
	display: flex;
	flex-direction:column;
}
.logincontent input{
	width: 75%;
	height: 0.5rem;
	margin: 0.2rem auto;
	background: #fcfcfc;
    border-top: 1px #fcfcfc solid;
    border-left: 1px #fcfcfc solid;
    border-right: 1px #fcfcfc solid;
    border-bottom: 1px #ccc solid;
    outline: none;/*去除输入框点击时的外边框*/
    box-shadow: none;/*去除输入框点击时的外边框*/
    font-size: 0.24rem;
}
.logincontent button{
	height: 0.7rem;
	width: 75%;
	margin: 0.3rem auto;
    border: 0;
    background: #BA55D3;
    color: #fff;
    outline: none;	    
    box-shadow: none;
    font-size: 0.24rem;
}
.registerjump{
	display: flex;
	width: 75%;
	margin: 0 auto;
	justify-content: flex-end;/*水平右对齐*/
}
.registerjump a{
	font-size: 0.24rem;
	text-decoration: none;
}

js代码：

// 手机端的适配代码 
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

 

九宫格案例代码：