rem 针对设计稿宽度，设计rem调试比例

最新推荐文章于 2022-12-16 11:56:49 发布

殘血★戰狼王

最新推荐文章于 2022-12-16 11:56:49 发布

阅读量982

点赞数

分类专栏： rem 针对设计稿宽度，设计rem调试比例文章标签： javascript

本文链接：https://blog.csdn.net/WLIULIANBO/article/details/112631497

版权

本文介绍了如何使用rem单位针对设计稿宽度进行适配，包括网易和手淘两种方法。网易方案通过动态设置根字体大小实现适配，而手淘方案结合Flexible库，考虑了视口缩放和Retina屏。两种方案各有优劣，网易方案简单但对Retina屏适配不足，手淘方案全面但计算相对复杂。

摘要由CSDN通过智能技术生成

rem 针对设计稿宽度，设计rem调试比例

一, 网易适配方法

屏幕宽度/设计稿rem宽度=页面动态font-size值


  (function(doc, win) {
   
    var docEl = doc.documentElement;
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalc = function() {
   
      var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
      if(!clientWidth) return;
      docEl.style