rem According to the width of the design draft, design the rem debugging ratio

rem According to the width of the design draft, design the rem debugging ratio

One, NetEase adaptation method

Screen width/design draft rem width = page dynamic font-size value

  (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.fontSize = clientWidth / 7.5 + 'px';
    };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
  

Explanation:

In this way, the root fonts-size of each page is set, because the rem unit is based on the root font-size, so as long as the conversion of a design draft corresponding to the mobile phone is determined, the
remaining screen sizes can be automatically adapted.

Above we found that the reference value of the design draft converted rem is 100, so we only need to divide the px value on the design draft by 100 to get the rem value we want.
Px/100=rem, so 100px=1rem, 25px=0.25rem

Second, the method of hand washing

The famous Flexible

Import: Directly quote Ali's CDN file (or download to local import)

 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>`在这里插入代码片`
 

Setting: Do not set the page. Flexible will automatically set the root font-size of each screen width, dynamic viewport, and dpr for Retina screens.

Conversion: Assuming that the design draft is 750 the same as the above NetEase, Flexible will divide the design draft into 10 copies, which can be understood as page width=10rem, that is, 1rem=75px, so the root font-size (baseline value)= 75px. The following css conversion rem formula is:

px/75=rem, so 100px=100/75=1.33rem, 50px=50/75=0.66rem

Conversion tool:

Obviously, it can be seen that the conversion between px and rem is somewhat complicated due to the difference in the reference value, and even requires the assistance of a calculator. Recommend a conversion artifact here: "cssrem"

　cssrem: 配值设置

　　　　px_to_rem - px转rem的单位比例，假设拿到设计稿750，基准值是75，此处就设75

　　　　max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。


　　　　available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。
　　　　

(function(doc, win) {
    
    
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
    
    
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 32 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

NetEase Solution

1. Divide the design draft by 100 to get the width rem value
2. By setting the font-size for the html style, substitute the width rem value obtained in 1 into x document.documentElement.style.fontSize = document.documentElement.clientWidth / x +'px';
3. Design draft px/100 can be converted to rem
excellent: Adaptation is done through dynamic root font-size, basically no compatibility issues, the adaptation is more accurate, and the conversion is simple.
Poor: No viewport zoom, and no adaptation to the Retina screen of the iPhone, which leads to inadequate adaptation to some mobile phones.

Hand Tao Program

1. Divide the design draft by 10 to get the font-size reference value.
2. Introduce flexible
3. Don’t set the viewport scaling value of meta.
4. The design draft px/ font-size reference value can be converted to rem
excellent: through dynamic Root font-size, viewpor, dpr are used for adaptation, no compatibility issues, accurate adaptation.
Inferior: It is necessary to convert the reference value according to the design draft. When the sublime text editor plug-in is not used for development, the unit calculation is complicated.