设置CSS: body{font-size: 62.5%；}的原因是什么？

1.如何根据不同设备的分辨率设置字体。

在pc端想要做一个全屏适配的项目，但得根据分辨率的来随着放大缩小。移动端用过flexible来解决，不知道在pc端怎么处理比较好.
字体的单位使用rem（root element根元素）1rem就是根元素的font-size的值。
然后使用多媒体查询@media screen and （min-width=value）{html{font-size：value px}}直接设置根元素的字体大小，已达到自己所需。

举栗：

html{
font-size:625%;/*px换算成rem*/

color:#666;

}

@media(min-width:1440px){
html{
font-size:637.5%;

}

}

@media(min-width:1600px){
html{
font-size:731.25%;

}

}

@media(min-width:1680px){
html{
font-size:770%;

}

}

@media(min-width:1920px){
html{
font-size:879.375%;

}

}

@media(min-width:2560px){
html{
font-size:1168.75%;

}

}

@media(min-width:3440px){
html{
font-size:1575%;

}

}

@media(min-width:3840px){
html{
font-size:1760%;

}

}

原文链接：https://blog.csdn.net/weixin_41108537/article/details/89717094

2.在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便rem与px相互转换，rem的初始值为1rem=16px.当设置了body{font-size: 62.5%;}时，1rem则=16px*62.5%=10px,1.2rem则=12px.

body {
  font-size: 62.5%;
}
p {

  // font-size: 10px;
  font-size: 1.2rem;
}

因为设了62.5%后就有1rem = 10px，便于用rem来指定元素的尺寸，这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。 用rem定义尺寸的另一个好处是更能适应缩放浏览器设置字体尺寸等情况（因为rem相对于字体大小，会同步改变）。

转载于:https://www.cnblogs.com/wgx0428/p/5983446.html