移动端字体适配设置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端字体适配设置相关的知识，希望对你有一定的参考价值。
参考技术A 750px 是 iPhone6 的物理像素，即屏幕分辨率;移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;
通过动态的获取设备独立像素，然后除以设计稿的宽度，然后设置 rem，来动态自适应字体大小;
为什么要乘100，放大一些，便于计算，只需要将设计稿量出来的 px, 小数点向左移2位，即可转换成 rem;
移动端媒体查询设置字体大小适配不同机型（rem）
@media screen and (min-width: 320px) {
html {
font-size: 8.5333px !important;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 9.6px !important;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 10px !important;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 10.24px !important;
}
}
@media screen and (min-width: 411px) {
html {
font-size: 10.96px !important;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 11.04px !important;
}
}
@media screen and (min-width: 448px) {
html {
font-size: 11.9467px !important;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 12.8px !important;
}
}
@media screen and (min-width: 512px) {
html {
font-size: 13.6533px !important;
}
}
@media screen and (min-width: 544px) {
html {
font-size: 14.5067px !important;
}
}
@media screen and (min-width: 576px) {
html {
font-size: 15.36px !important;
}
}
@media screen and (min-width: 608px) {
html {
font-size: 16.2133px !important;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 17.0667px !important;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 20px !important;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 20.48px !important;
}
}
@media screen and (min-width: 800px) {
html {
font-size: 21.3333px !important;
}
}
@media screen and (min-width: 1024px) {
html {
font-size: 27.3067px !important;
}
}
一般的设计稿宽度为375px或者750px；当设计稿为375时，此时的1rem = 10px；当设计稿为750时，此时的1rem = 20px；然后对照着设计稿上的尺寸开发就可以了
以上是关于移动端字体适配设置的主要内容，如果未能解决你的问题，请参考以下文章