概述
为解决适安卓手机跟苹果手机字体大小和高度不一致的问题；
首先设置初始字体：由于浏览器默认(因为1em=16px，所以0.625em=10px)；
设置初始字体大小为62.5%；然后根据不同的屏幕尺寸计算相对应的百分比；
代码如下：
html,
body {//安卓默认360
width: 100%;
font-size: 62.5%;
}
@media only screen and (min-width: 320px) {iphone5
html,
body {
font-size: 55.556% !important;
}
}
@media only screen and (min-width: 360px) {//一般安卓手机
html,
body {
font-size: 62.5% !important;
}
}
@media only screen and (min-width: 375px) {//iphone6/7/8
html,
body {
font-size: 65.10417% !important;
}
}
@media only screen and (min-width: 414px) {//iphone6/7/8 plus
html,
body {
font-size: 71.875% !important;
}
}
@media only screen and (min-width: 768px) {//ipad
html,
body {
font-size: 133.3333% !important;
}
}
@media only screen and (min-width: 1024px) {//ipad pro
html,
body {
font-size: 177.77778% !important;
}
}
最后使用的时候：
px换算成rem，就能实现不同设备展示的字体大小及尺寸相差不大。
注：属个人总结性文档，勿喷~
最后
以上就是落后月亮为你收集整理的html手机端最小字体,手机端h5页面字体大小适配的全部内容，希望文章能够帮你解决html手机端最小字体,手机端h5页面字体大小适配所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复