Created
June 28, 2018 16:00
-
-
Save Troland/f273db212ff386e4c792fe363cee5201 to your computer and use it in GitHub Desktop.
lib-rem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // REM 适配 <html> | |
| // 750px (iPhone 6) | |
| // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 | |
| html[data-rem="375"] { | |
| font-size: 20PX; | |
| } | |
| // 17.06 = 320*20/375 (iPhone 5) | |
| @media only screen and (min-width: 640px) { | |
| html[data-rem="375"] { | |
| font-size: 17.06PX !important; | |
| } | |
| } | |
| // base root size (iPhone 6) | |
| @media only screen and (min-width: 750px) { | |
| html[data-rem="375"] { | |
| font-size: 20PX !important; | |
| } | |
| } | |
| // 21.33333333 = 400*20/375 (Most Android) | |
| @media only screen and (min-width: 800px) { | |
| html[data-rem="375"] { | |
| font-size: 21.33333333PX !important; | |
| } | |
| } | |
| // 22.08 = 414*20/375 (iPhone 6 Plus) | |
| @media only screen and (min-width: 828px) { | |
| html[data-rem="375"] { | |
| font-size: 22.08PX !important; | |
| } | |
| } | |
| // 25.6 = 480*20/375 (iPad) | |
| @media only screen and (min-width: 960px) { | |
| html[data-rem="375"] { | |
| font-size: 25.6PX !important; | |
| } | |
| } | |
| // 20*100/375 = 5.333333333 以 375 宽度为基准动态计算 | |
| //html[data-rem="375"] { | |
| // font-size: 5.333333333vw; | |
| //} | |
| // REM 适配, 用法: <html data-rem="320"> | |
| // 640px (iPhone 5) | |
| // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 | |
| html[data-rem="320"] { | |
| font-size: 20PX; | |
| } | |
| // 23.4375 = 375*20/320 (Most Android) | |
| @media only screen and (min-width: 750px) { | |
| html[data-rem="320"] { | |
| font-size: 23.4375PX !important; | |
| } | |
| } | |
| // 25 = 400*20/320 (Most Android) | |
| @media only screen and (min-width: 800px) { | |
| html[data-rem="320"] { | |
| font-size: 25PX !important; | |
| } | |
| } | |
| // 25.875 = 414*20/320 (iPhone 6 Plus) | |
| @media only screen and (min-width: 828px) { | |
| html[data-rem="320"] { | |
| font-size: 25.875PX !important; | |
| } | |
| } | |
| // 30 = 30 (iPad) | |
| @media only screen and (min-width: 960px) { | |
| html[data-rem="320"] { | |
| font-size: 30PX !important; | |
| } | |
| } | |
| // 20*100/320 = 6.25 以 320 宽度为基准动态计算 | |
| //html[data-rem="320"] { | |
| // font-size: 6.25vw; | |
| //} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment