750px媒体查询 1rem=100px

750px的设计稿

/* 媒体查询 - 字体设置 */
/* 平滑过渡 */
html{font-size: 100px; -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; }
/* 设计稿宽度=750时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */

@media screen and (max-width: 1280px) {
	html{ font-size: 170.66px; }
}
@media screen and (max-width: 1200px) {
	html{ font-size: 160px; }
}
@media screen and (max-width: 1120px) {
	html{ font-size: 149.33px; }
}
@media screen and (max-width: 1080px) {
	html{ font-size: 144px; }
}
@media screen and (max-width: 960px) {
	html{ font-size: 128x; }
}
@media screen and (max-width: 880px) {
	html{ font-size: 117.33px; }
}
@media screen and (max-width: 840px) {
	html{ font-size: 112px; }
}
@media screen and (max-width: 800px) {
	html{ font-size: 106.66px; }
} 
@media screen and (max-width: 750px) {
	html{ font-size: 100px; }
}

@media screen and (max-width: 700px) {
	html{ font-size: 93.33px; }
}

@media screen and (max-width: 640px) {
	html{ font-size: 85.33px; }
}
@media screen and (max-width: 600px) {
	html{ font-size: 80px; }
}
@media screen and (max-width: 560px) {
	html{ font-size: 74.66px; }
}
@media screen and (max-width: 480px) {
	html{ font-size: 64px; }
}
@media screen and (max-width: 400px) {
	html{ font-size: 53.33px; -webkit-transition: none; }
}
@media screen and (max-width: 360px) {
	html{ font-size: 48px; }
}
@media screen and (max-width: 320px) {
	html{ font-size: 42.66px; }
}

640px的设计稿

/* 媒体查询 - 字体设置 */
/* 平滑过渡 */
html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; }
/* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */
@media screen and (max-width: 1280px) {
	html{ font-size: 200px; }
}
@media screen and (max-width: 1200px) {
	html{ font-size: 187.5px; }
}
@media screen and (max-width: 1120px) {
	html{ font-size: 175px; }
}
@media screen and (max-width: 1080px) {
	html{ font-size: 168.75px; }
}
@media screen and (max-width: 960px) {
	html{ font-size: 150px; }
}
@media screen and (max-width: 880px) {
	html{ font-size: 137.5px; }
}
@media screen and (max-width: 840px) {
	html{ font-size: 131.25px; }
}
@media screen and (max-width: 800px) {
	html{ font-size: 125px; }
}
@media screen and (max-width: 720px) {
	html{ font-size: 112.5px; }
}
@media screen and (max-width: 640px) {
	html{ font-size: 100px; }
}
@media screen and (max-width: 600px) {
	html{ font-size: 93.75px; }
}
@media screen and (max-width: 560px) {
	html{ font-size: 87.5px; }
}
@media screen and (max-width: 480px) {
	html{ font-size: 75px; }
}
@media screen and (max-width: 400px) {
	html{ font-size: 62.5px; -webkit-transition: none; }
}
@media screen and (max-width: 360px) {
	html{ font-size: 56.25px; }
}
@media screen and (max-width: 320px) {
	html{ font-size: 50px; }
}