rem单位

css:

 html {
  font-size : 20px;
}
@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; 
  }
} 

js:

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

媒体查询中的具体的font-size需要结合大家的设计师们来一起调试确定,写一套适合自己公司的。

参考资料1
参考资料2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • px单位一般我都是使用px来设置我们的文本,因为它比较稳定和精确。但是px本身却存在一些问题,当用户在浏览器我们的...
    Luyc_Han阅读 4,101评论 0 0
  • Rem 现如今移动端的尺寸大小多种导致也页面不能在各种屏幕上适配,许多网站之前主要采取(1)采用的流式布局:通过百...
    wanpieces阅读 4,954评论 0 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1、在所有的单位中,font-size推荐使用px,然后结合媒体查询进行重要节点的控制,这样可以满足突出或者弱化某...
    愿你如夏日清凉的风阅读 5,107评论 2 0
  • 景升平 关键词:建议、发现、探讨 1、建议 在小组内以"监督者+自己+被监督者”三位一体,形成一个打卡、分享互动...
    迈克老景阅读 1,631评论 0 1