15响应式 移动端适配 多列布局

15响应式 移动端适配 多列布局

一、响应式

一套代码能够适应多个终端，都有一个好的显示效果，这就是响应式

原理：利用媒体查询 @media

drp = 物理像素 / 逻辑像素
	物理像素	设备本身决定的
	逻辑像素	开发者用的像素

理想视口：可视视口和布局视口是1:1的关系

实现理想视口的方式
	<meta name="viewport" contnet="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

width-device=width	设置宽度为设备宽度
initial-scale=1		设置初始比例为1:1
minimum-scale=1		设置最小比例是1:1
maximum-scale=1		设置最大比例是1:1
user-scalable:0		设置用户不可以改变比例

二、移动端适配

使用百分比布局

使用rem单位＋js实现

rem单位
	是html文字大小的倍数，默认为16px

默认750的设计稿中html的文字大小为100px，1rem=100px

js文件实现html文字大小能够根据屏幕宽度自动改变

js文件如下

;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth; 
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) {
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)

使用vw和vh单位

wh单位
	屏幕宽度就是100vw，1vw是屏幕宽度的百分之一

vh单位
	屏幕高度就是100vh，1vh是屏幕高度的百分之一

三、多列布局

一段文章，分为多段文字，类似于报纸上文章的布局

设置列数
	column-count:;	属性值为数字

设置列之间的间隔
	column-gap:;	属性值为像素
	
设置间隔的规则
	column-rude:;	属性值与边框border的属性值一样

设置列宽
	column-width:;	 属性值为像素