|
@@ -0,0 +1,172 @@
|
|
|
+/* 默认样式 */
|
|
|
+html {
|
|
|
+ font-size: 16px; /* 默认的REM基准值 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 320px */
|
|
|
+@media (max-width: 320px) {
|
|
|
+ html {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 340px */
|
|
|
+@media (min-width: 321px) and (max-width: 340px) {
|
|
|
+ html {
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 360px */
|
|
|
+@media (min-width: 341px) and (max-width: 360px) {
|
|
|
+ html {
|
|
|
+ font-size: 44px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 380px */
|
|
|
+@media (min-width: 361px) and (max-width: 380px) {
|
|
|
+ html {
|
|
|
+ font-size: 46px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 400px */
|
|
|
+@media (min-width: 381px) and (max-width: 400px) {
|
|
|
+ html {
|
|
|
+ font-size: 48px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 420px */
|
|
|
+@media (min-width: 401px) and (max-width: 420px) {
|
|
|
+ html {
|
|
|
+ font-size: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 440px */
|
|
|
+@media (min-width: 421px) and (max-width: 440px) {
|
|
|
+ html {
|
|
|
+ font-size: 52px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 460px */
|
|
|
+@media (min-width: 441px) and (max-width: 460px) {
|
|
|
+ html {
|
|
|
+ font-size: 54px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 480px */
|
|
|
+@media (min-width: 461px) and (max-width: 480px) {
|
|
|
+ html {
|
|
|
+ font-size: 56px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 500px */
|
|
|
+@media (min-width: 481px) and (max-width: 500px) {
|
|
|
+ html {
|
|
|
+ font-size: 58px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 520px */
|
|
|
+@media (min-width: 501px) and (max-width: 520px) {
|
|
|
+ html {
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 540px */
|
|
|
+@media (min-width: 521px) and (max-width: 540px) {
|
|
|
+ html {
|
|
|
+ font-size: 62px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 560px */
|
|
|
+@media (min-width: 541px) and (max-width: 560px) {
|
|
|
+ html {
|
|
|
+ font-size: 64px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 580px */
|
|
|
+@media (min-width: 561px) and (max-width: 580px) {
|
|
|
+ html {
|
|
|
+ font-size: 66px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 600px */
|
|
|
+@media (min-width: 581px) and (max-width: 600px) {
|
|
|
+ html {
|
|
|
+ font-size: 68px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 620px */
|
|
|
+@media (min-width: 601px) and (max-width: 620px) {
|
|
|
+ html {
|
|
|
+ font-size: 70px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 640px */
|
|
|
+@media (min-width: 621px) and (max-width: 640px) {
|
|
|
+ html {
|
|
|
+ font-size: 72px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 660px */
|
|
|
+@media (min-width: 641px) and (max-width: 660px) {
|
|
|
+ html {
|
|
|
+ font-size: 74px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 680px */
|
|
|
+@media (min-width: 661px) and (max-width: 680px) {
|
|
|
+ html {
|
|
|
+ font-size: 76px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 700px */
|
|
|
+@media (min-width: 681px) and (max-width: 700px) {
|
|
|
+ html {
|
|
|
+ font-size: 78px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 720px */
|
|
|
+@media (min-width: 701px) and (max-width: 720px) {
|
|
|
+ html {
|
|
|
+ font-size: 80px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 740px */
|
|
|
+@media (min-width: 721px) and (max-width: 740px) {
|
|
|
+ html {
|
|
|
+ font-size: 82px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 760px */
|
|
|
+@media (min-width: 741px) and (max-width: 760px) {
|
|
|
+ html {
|
|
|
+ font-size: 84px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 大于750的宽度尺寸 */
|
|
|
+@media (min-width: 761px) {
|
|
|
+ html {
|
|
|
+ font-size: 100px;
|
|
|
+ }
|
|
|
+}
|