zoukankan      html  css  js  c++  java
  • 移动适配方案的总结

    1. js代码实现适配 
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    //iphone6下font-size=20px
    dpr = window.devicePixelRatio || 1;
    rem = docEl.clientWidth * dpr / 37.5;  
    scale = 1 / dpr;
    
    
    // 设置viewport,进行缩放,达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
    // 设置data-dpr属性,留作的css hack之用
    docEl.setAttribute('data-dpr', dpr);
    
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
    
    // 给js调用的,某一dpr下rem和px之间的转换函数
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };
    
    window.dpr = dpr;
    window.rem = rem;

      2.媒体查询实现适配

    html {
    font-size : 20px;
     }
     @media only screen and (min- 401px){
     html {
     font-size: 25px !important;
     }
     }
     @media only screen and (min- 428px){
     html {
     font-size: 26.75px !important;
     }
     }
     @media only screen and (min- 481px){
     html {
     font-size: 30px !important; 
     }
     }
     @media only screen and (min- 569px){
     html {
     font-size: 35px !important; 
     }
     }
     @media only screen and (min- 641px){
     html {
     font-size: 40px !important; 
     }
     }
  • 相关阅读:
    真正的Java学习从入门到精通
    Java学习从入门到精通(1) [转载]
    Java Learning Path(三)过程篇
    Java Learning Path(五)资源篇
    Java Learning Path(四) 方法篇
    浅析Java语言中两种异常的差别
    JDK,JRE,JVM区别与联系
    JAVA敏捷开发环境搭建
    谈谈WEB开发中的苦大难字符集问题
    java读取clob字段的几种方法
  • 原文地址:https://www.cnblogs.com/goweb/p/6639833.html
Copyright © 2011-2022 走看看