zoukankan      html  css  js  c++  java
  • 移动端单位换算理解

    在公司上班两年多,对移动端的布局用过两种方法

      第一种。页面顶部引入一个rem.js,代码如下:

    new function (){
           var _self = this;
           _self.width = 750;
           _self.fontSize = 100;
           _self.widthProportion = function(){
                   var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;
    
                   return p>1?1:p;
               };
    
           _self.changePage = function(){
               document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
           }
    
           _self.changePage();
           window.addEventListener("resize",function(){_self.changePage();},false);
    }; 

      UI给的设计稿是按照750*1334的设计稿。对于随屏幕变化的根据rem来设置大小。当页面为750px,其font-size为100px。这个就是一刀切,没有考虑dpr。头部<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">也是这样固定设置。

      以上方法换算出来的大小就是页面呈现的最终大小。因为是没有缩放,100%展示。

       第二种方法: 去年开始采用淘宝团队的flexsible方案。此方案跟上个版本比较的话有如下差异:

      1、会获取设备的dpr,将layout viewport(网页的css高度和宽度)会是设备大小的dpr倍。然后再使用<meta name="viewport" content="initial-scale=1/dpr, maximum-scale=1/dpr, minimum-scale=1/dpr, user-scalable=no">将网页缩至设备的100%。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。

      2、以上原因解决了ios机1像素过大的问题。

    更好的理解flexible请移步 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

  • 相关阅读:
    DevExpress WinForms v21.1 重磅升级桑基图控件
    UI组件库Kendo UI for Angular R3 2021新版亮点 支持Bootstrap 5
    Java随笔
    oracle 排序性能 监控,Oracle 常用性能监控SQL语句
    Oracle数据库管理常用的监控脚本极大的简化运维工作
    oracle误删除数据的恢复方法
    Oracle数据库之同义词
    MVCC详解
    goldengate classic extract在什么情况需要重建以及如何重建
    Oracle OGG Kafka
  • 原文地址:https://www.cnblogs.com/nanacln/p/8694975.html
Copyright © 2011-2022 走看看