响应式布局

1. 纯css实现响应式布局（媒体查询）
   设置 Meta 标签,在标签里加入meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-   	scalable=no">

容器尽量使用相对尺寸：百分比替代px
文字大小尽量使用em、rem
图片尽量使用相对尺寸，尽量避免使用绝对尺寸
页面布局尽量使用流式布局：float，好处：如果宽度太小，后面的元素回自动添加到前一个元素的下方，不会在水平方向溢出，避免水平方向出现滚动条。
响应式页面必须使用媒体查询

@media 类型 and (条件1) and (条件二)
{
	css样式
}
//举个栗子
@media screen and (max-width:980px ) {
body{
	background-color: red;
	}
}

或者第二种媒体查询方法，使用link连接，media属性用于设置查询方式

<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>

2. js实现响应式布局
   //浏览器大小发生改变时触发的函数
   window.onresize = function(){
   var browserWidth = document.body.clientWidth;//获取浏览器可视区域的宽度。
   if(browserWidth<1200){//当浏览器可视区域小于1070时触发
   $(".ficrm-form-ele-3").css(“width”,“100%”);
   $(".ficrm-form-ele-2").css(“width”,“100%”);
   if(browserWidth<625){
   $(".searchDiv").css({“margin-top”:“10px”,“margin-left”:“20px”});
   }else{
   $(".searchDiv").css({“margin-top”:“0px”,“margin-left”:“20px”});
   }
   }else{
   $(".ficrm-form-ele-3").css(“width”,“33%”);
   $(".ficrm-form-ele-2").css(“width”,“50%”);
   $(".searchDiv").css({“margin-top”:“0px”,“margin-left”:“20px”});
   }
   }

3. label 标签
   label与input一起用，可以用label代替checkbox，让input display:none，点击label标签与点击checkbox效果相同，可以控制其他的元素的显示与隐藏，还可以设置babel的样式、大小、位置等。