移动端布局方式

响应式布局

利用@media进行断点，在每个断点中编写css。

@media (max-width:1000px){
    div{background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
    div{background: yellow;}
}
@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}
@media not print and (max-width:1150px){
    div{border-radius:50%;}
}

and，就是‘和’的意思，前后两个条件都达到时

only，唯一

not，除了这个之外

上面4个@media，分别的效果是：

当浏览器宽度低于1000px时

当浏览器宽度大于1000px 和 小于1150px时

当在屏幕上显示 和 宽度小于1150px时

除了在打印上显示外 和 宽度小于1150px时

响应式网站的开发，会先对比PC和MOBILE的设计稿，看看有什么区别，然后才进行编写css。通常都是使用flex。宽度尽量用百分比，间距、高度、字体大小使用 em，就可以很方便的进行大小的控制。

rem+媒体查询布局+Less
REM这个单位，会根据html的font-size大小进行转换。

html{font-size:100px;}  p{padding-top:.5rem;}  
转换后p的padding-top就是50px了

进行适当的计算，当前屏幕的宽度，html的font-size是多少px就可以

如何计算当前html的font-size值？

比如，拿到的设计稿是750px，那就设置成当屏幕宽度是750的时候，html的font-size就是100px(当然这个100px你可以随意设置的，我设置成100px只是方便我计算)，然后就根据当前屏幕的宽度 / 750 * 100，就得到了当前屏幕宽度的font-size值。

//当前屏幕宽度 / 750 = 当前屏幕宽度的font-size / 100
	(function (doc, win) {      
        var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',      
		recalc = function () {        
			var clientWidth = docEl.clientWidth;        
			if (!clientWidth) return;        
			docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';      
		};          
		if (!doc.addEventListener) return;         
		win.addEventListener(resizeEvt, recalc, false);         
		doc.addEventListener('DOMContentLoaded', recalc, false);  
	})(document, window);  

设置viewport中的width

就是定死viewport中的width大小。

比如设计稿是750的，然后就在代码上写：

<met name='viewport' content='width=750' />

百分比布局

百分比布局=自己的宽度÷父元素的宽度
里面有一些小属性：vertical-align:middle;图片和文字居中对齐