vue项目在不同分辨率下页面的适配

vue项目中在不同分辨率下页面的适配（媒体查询方案）

1.通过在不同分辨率下设置html的字体大小

@media screen and (min-width: 1281px) and (max-width: 1366px){
  html {
    font-size: 12px ;
  }
}
@media screen and (min-width: 1367px) and (max-width: 1440px) {
	html{
		font-size:14px
	}
}
@media screen and (min-width: 1441px) and (max-width: 1920px) {
	html{
		font-size:16px
	}
}
@media screen and (min-width: 1921px) and (max-width: 2194px) {
	html{
		font-size:18px
	}
}
@media screen and (min-width: 2195px) and (max-width: 2559px) {
    html{
		font-size:20px
	}
}
@media screen and (min-width: 2560px) and (max-width: 3071px) {
	html{
		font-size:22px
	}
}
@media screen and (min-width: 3072px) and (max-width: 3839px) {
	html{
		font-size:24px
	}
}
@media screen and (min-width: 3840px){
	html{
		font-size:26px
	}
}

2.在不同分辨率下，一般用的字体都是媒体查询中所设置好的html字体大小，若有单独的一些字体大小，则用rem来表示，比如在1366分辨率下有个内容设计图给的大小是20px，那么为了使不同分辨率下字体自适应，需要给字体大小为 ：当前html的字体大小除以20px ，即12/20 结果为0.6rem。