项目开发之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!

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值