• 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)
  • 相关阅读:
    Angularjs中的缓存以及缓存清理
    举例子来说明Python引用和对象
    对象关系映射ORM
    Apache Storm 核心概念
    Linux如何查看哪个进程占用的SWAP分区比较多?
    MySQL彻底清除slave信息
    监控MySQL的时候监控用户应该怎么授权?
    MySQL用户密码修改
    专职DBA-Zabbix 3.0 for percona-server TokuDB
    防止rm强制删除
  • 原文地址:https://www.cnblogs.com/guozhe/p/15753083.html
Copyright © 2020-2023  润新知