手机端h5页面字体大小适配
為解決適安卓手機跟蘋果手機字體大小和高度不一致的問題;
首先設置初始字體:由于瀏覽器默認(因為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,就能實現不同設備展示的字體大小及尺寸相差不大。
注:屬個人總結性文檔,勿噴~
轉載于:https://www.cnblogs.com/cyeldxlz/p/iaFontsize.html
總結
以上是生活随笔為你收集整理的手机端h5页面字体大小适配的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: EasyNVR摄像机网页无插件直播方案H
- 下一篇: 01_Python