移动端布局 全套解决方案 （附代码）

今天上午发了一篇文章是关于微信h5支付的，也说了楼主最近在做移动端，之前也做过移动端的一些单页面，这次就整理一下笔记以及遇到的问题，欢迎交流。

1.html部分

• 移动端需要禁止用户缩放，否则体验非常差劲，话不多说，上头部代码。(来源百度)

	"UTF-8">
	    "viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	    
	    "apple-mobile-web-app-capable" content="yes" />
	    
	    "apple-mobile-web-app-status-bar-style" content="black" />
	    
	    "format-detection"content="telephone=no, email=no" />
	    
	    "renderer" content="webkit">
	    
	    "X-UA-Compatible" content="IE=edge">
	    
	    "HandheldFriendly" content="true">
	    
	    "MobileOptimized" content="320">
	    
	    "screen-orientation" content="portrait">
	    
	    "x5-orientation" content="portrait">
	    
	    "full-screen" content="yes">
	    
	    "x5-fullscreen" content="true">
	    
	    "browsermode" content="application">
	    
	    "x5-page-mode" content="app"> 
	    
	    "msapplication-tap-highlight" content="no">
复制代码

2.css部分

• 初始化样式，这个就不多说了，上代码。

	body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
input, textarea, th, td {
    margin: 0;
    padding: 0;
}

body, button, input, select, textarea {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

address, cite, dfn, em, var {
    font-style: normal;
}

code, kbd, pre, samp {
    font-family: couriernew, courier, monospace;
}

small {
    font-size: 12px;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0); 

}

a:hover {
    text-decoration: none;
    outline:none;
    background: none;
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

legend {
    color: #000;
}

fieldset, img {
    border: 0;
}

button, input, select, textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input{
	margin: 0;
padding: 0;
border: 1px solid transparent;  //自定义边框
outline: none;    //消除默认点击蓝色边框效果
}

复制代码

3.关键部分 rem.js

• 关于rem，网上也是一堆说法，楼主之前也看过一些网上的，写的比较乱。下面附上楼主的代码。

	(function (doc, win) {
	    var docEl = doc.documentElement,
	        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	        recalc = function () {
	            var clientWidth = docEl.clientWidth;
	            if (!clientWidth) return;
	            if(clientWidth>=750){
	                // 这里的数字 取决于设计稿的宽度  直接把这个750改成你设计稿的宽度,布局时候1rem=100px，下面那个750不要动
	                docEl.style.fontSize = '100px';
	            }else{
	                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
	            }
	        };
	
	    if (!doc.addEventListener) return;
	    win.addEventListener(resizeEvt, recalc, false);
	    recalc();
	})(document, window);
复制代码

说一下遇到的问题

• 由于使用rem布局 ，楼主转化下来设计稿中有的字体比如是14px；转化为rem就是0.14rem;但谷歌浏览器默认最小字体12px，也就是0.24rem；所以 小于0.24rem的字体实际都会显示成12px；这时候可以和设计师沟通，或者自己看着放大一点，其他布局正常来就行,1rem=100px;

• body背景图兼容;之前做body背景图时候在安卓下不兼容，不是自适应，搞了半天，原来是没让html，body百分百。

	html, body {
        width: 100%;
        height: 100%;
    }
	body {
        background: url("/static/web/image/zhuce_beijing.png") no-repeat center center/100% 100%;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
        width: 100%;
   }
复制代码

• 还有需要注意的就是一些input的默认样式 ，以及button的默认样式，还有a标签点击去除高亮等。js在移动端下还没遇到过比较大的问题。

结尾

• 如果还有什么移动端需要注意的问题，欢迎评论补充。