移动端字体大小京东设置差异

移动端布局最为常见的问题是关于字体大小的设置,不同尺寸、屏幕上字体大小的设置直接影响到整个页面的美观比例。那么我们再移动端布局时,要如何注意到关于字体大小问题处理呢?

本文借鉴京东移动端对于字体大小的设置,个人觉得很不错。

/*  京东 m.jd.com */
@media only screen and (min-width: 320PX) and (max-width:360PX) {
html {
font-size:13.65px
}
}
@media only screen and (min-width: 360PX) and (max-width:375PX) {
html {
font-size:15.36px
}
}
@media only screen and (min-width: 375PX) and (max-width:390PX) {
html {
font-size:16px
}
}
@media only screen and (min-width: 390PX) and (max-width:414PX) {
html {
font-size:16.64px
}
}
@media only screen and (min-width: 414PX) and (max-width:640PX) {
html {
font-size:17.664px
}
}
@media screen and (min-width: 640PX) {
html {
font-size:27.31px
}
}
/*
我们来看看怎么计算的
设计图中 尺寸40px盒子,我们可以看到在媒体查询中,iPhone6 的布局视口是375,即html的font-size为16px,
则计算为rem: 40/16 = 2.5 rem
*/

以上便是京东移动端对于不同屏幕字体大小的设置。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!