PC端自适应使用rem 移动端适配升级版

做一个PC端的网页，设计图是1920X1080，要在常见屏上显示正常 ，比如：1280X720 1366X768 1440X900 1920X1080。
就要使用REM，width、height、margin、padding、left、top都采用了REM,
**注意：**HTML的FONT-SIZE设置的为100PX.是为了计算方便.此时BODY的FONT-SIZE要设置为正常值,例如14PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

1、PC端
当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

;(function(win) {
    		var tid;
    		function refreshRem() {
    			let designSize = 1920; // 设计图尺寸
    			let html = document.documentElement;
    			let wW = html.clientWidth;// 窗口宽度
    			let rem = wW * 100 / designSize; 
    			document.documentElement.style.fontSize = rem + 'px';
    	    }
	     
	    win.addEventListener('resize', function() {
	    	clearTimeout(tid);
	    	tid = setTimeout(refreshRem, 300);
	    }, false);
	    win.addEventListener('pageshow', function(e) {
	    	if (e.persisted) {
	    		clearTimeout(tid);
	    		tid = setTimeout(refreshRem, 300);
	    	}
	    }, false);

	    refreshRem();

	})(window);

　　

计算font-size的逻辑是：
当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.

2、移动端

由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

  let designSize = 750; // 设计图尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度
  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';
})

使用REM能够较好的自适应移动端

手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.

if ( window.innerWidth>1080)

return;

3、移动端适配升级版
首先我使用sublime进行开发，可以先在github上下载css转rem工具代码：cssrem
链接：https://github.com/flashlizi/cssrem
设置px_to_rem为37.5，可以写死，意思就是使用ipone6屏幕尺寸进行开发
vscode可以使用px to rem & rpx (cssrem)进行转换。修改默认16px为18.75

rem代码：放在JS中

(function(win) {
    var docEl = win.document.documentElement;
    var tid;

    function setRemUtils() {
        // 获取rem基准值
      var rem = docEl.clientWidth / 20;// 窗口宽度，如果是750设计图，则将10改为20
      // 动态设置html根元素的font-size 
      docEl.style.fontSize = rem + 'px';
  }

  setRemUtils();

  // 窗口变化时触发
   win.addEventListener('resize', function() {
       clearTimeout(tid);
       tid = setTimeout(setRemUtils, 300);
   }, false);
   win.addEventListener('pageshow', function(e) {
       if (e.persisted) {
           clearTimeout(tid);
           tid = setTimeout(setRemUtils, 300);
       }
   }, false);
})(window)