⼿机端h5页⾯字体⼤⼩适配
为解决适安卓⼿机跟苹果⼿机字体⼤⼩和⾼度不⼀致的问题；
⾸先设置初始字体：由于浏览器默认（因为1em=16px，所以0.625em=10px）；
设置初始字体⼤⼩为62.5%；然后根据不同的屏幕尺⼨计算相对应的百分⽐；
代码如下：
html,
body{//安卓默认360
width:100%;
font-size:62.5%;
}
@mediaonlyscreenand(min-width:320px){iphone5
html,
body{
font-size:55.556%!important;
}
}
@mediaonlyscreenand(min-width:360px){//⼀般安卓⼿机
html,
body{
font-size:62.5%!important;
}
}
@mediaonlyscreenand(min-width:375px){//iphone6/7/8
html,
body{
font-size:65.10417%!important;
}
}
@mediaonlyscreenand(min-width:414px){//iphone6/7/8plus
html,
body{
font-size:71.875%!important;
}
}
@mediaonlyscreenand(min-width:768px){//ipad
html,
body{
font-size:133.3333%!important;
}
}
@mediaonlyscreenand(min-width:1024px){//ipadpro
html,
body{
font-size:177.77778%!important;
}
}
最后使⽤的时候：
px换算成rem，就能实现不同设备展⽰的字体⼤⼩及尺⼨相差不⼤。
注：属个⼈总结性⽂档，勿喷~
本文发布于:2023-03-04 14:56:27，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1677912988136007.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：怎样放大手机字体.doc
本文 PDF 下载地址：怎样放大手机字体.pdf
| 留言与评论（共有 0 条评论） |
