Bootstrap

html手机端最小字体,手机端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,就能实现不同设备展示的字体大小及尺寸相差不大。

注:属个人总结性文档,勿喷~

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;