项目开发之rem加媒体查询实现移动端布局

        这次小编将要拿一个实际开发来将布局，首先我们拿到美工给的图一般会分为两种格式一种是640的图一种是750的图这两种图其实的效果是一样的只不过给,我们得到的测量数据不同，所以其他都是一样的，这里我们就拿640的来讲解。

        我们将屏幕分为20份（这里随便只不过20份比较好计算），然后我们可已经640的屏幕分为20份每一份是32px;所以我们在计算的时候例如：获得一个尺寸为 28 转化为 对应的比例关系就是28/32 rem！

      我们以前介绍过媒体查询，这里也要为了使用不同的尺寸来进行媒体查询的设置，只不过是为了兼容尺寸，可以把它放到base.css文件中！

     

/* 媒体查询 字号 分为20份 */
@media screen and (width:320px){
	html{
		font-size:320/20px;
	}
}
@media screen and (width:360px){
	html{
		font-size:360/20px;
	}
}
@media screen and (width:375px){
	html{
		font-size:375/20px;
	}
}
@media screen and (width:414px){
	html{
		font-size:414/20px;
	}
}
@media screen and (width:412px){
	html{
		font-size:412/20px;
	}
}

    然后就开始写布局了，这期间一定要记住，这里使用的是rem，得到的尺寸都要除以32，使用的单位是rem!