媒体查询配合rem使用。

@media only screen and (min-width: 340px){
  html {
    font-size: 20px !important;
  }
}
@media only screen and (min-width: 401px){
  html {
    font-size: 25px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
    font-size: 26.75px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
    font-size: 30px !important;
  }
}
@media only screen and (min-width: 569px){
  html {
    font-size: 35px !important;
  }
}
@media only screen and (min-width: 641px){
  html {
    font-size: 40px !important;
  }
}

然后html里面的DOM根据html来设定大小，宽度，高度。

手机移动端最好还是用em、%和rem，媒体查询做不到全面兼容，而且维护和开发成本高。

小撸怡情，大撸伤身。
尽量用通用的样式，通用样式解决不了的时候再根据媒体查询单独设置。
正常使用没有问题的。

少用点吧，关键的地方用用，能不用就不用，用多了代码冗余，非常不好维护，如果大面积用，相当于一个模块就有多了几倍的代码，如果页面数据量大，很影响性能的。
如果产品更注重性能和速度，还是需要放弃一些更完美的视觉体验的。

移动端页面添加上下面的meta

html<meta name="viewport" content="width=device-width, initial-scale=1" />

如果要禁止用户的缩放，请自行查询文档后添加

然后尽量不要使用px作为单位，除了border-width, outline-width, border-radius等只需要微量单位的属性外，多使用em, %, rem做单位, 尤其是字体。这种处理是不需要媒体查询的，真正用到媒体查询的东西不会太多的，主要是在布局上可能会有些媒体查询的东西存在。