媒体查询+rem 自适应

1、根据媒体查询设置html的font-size的大小，代码如下：

@media screen and (min-width: 320px) {
	html{
		font-size: 21.33px;
	}
}
@media screen and (min-width: 750px) {
	html{
		font-size: 50px;
	}
}

2、那么rem是怎么换算的呢？我们可以简单的举个例子：

比如一张设计稿的宽度是750px(一般)，你测量了一个100像素的宽度，这个时候你要怎么设置宽度呢？
实际上就是'测量的像素' / 'html的字体大小'，也就是100 / 50 = 2, css中直接设置width:2rem； 
这样我们就能看到一种效果，当屏幕宽度大于等于320px小于750px时，实际宽度为 2rem * 21.33px = 42.66px;
当屏幕宽度大于等于750px时，实际宽度为 2rem * 50px = 100px ,实现了在不同的屏幕大小里面等比例缩放，达到自适应的效果 

标签：px,750px,查询,适应,宽度,rem,font,html,size
来源： https://www.cnblogs.com/laid/p/14733630.html