手机网站rem自动适配字体大小

发布时间:2020年3月20日

rem和px一样是网页中的丈量单位,rem具有一个神奇的特性,用rem做单位的字体大小受根元素的字体大小的影响,因为这个属性,它非常适合用来做手机网站适配

为解决适安卓手机跟苹果手机字体大小和高度不一致的问题;

首先设置初始字体:由于浏览器默认(因为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,就能实现不同设备展示的字体大小及尺寸相差不大。

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

本文由手机网站建设、网站移动端适配专家-跨屏网原创,转载请保留版权( PC网站快速适配手机端www.kuaping.com跨屏网自主开发跨屏平台,网站引用一句话JS,即可快速适配手机端,打通手机版、微信等众多终端。欢迎来电咨询!热线:027-81777732、13343477732