zoukankan      html  css  js  c++  java
  • 移动端适配方案

    介绍两种移动端适配方案

    1. rem为主

    • 设置根节点字体大小,页面元素都使用scss表达式将px转换为rem
      // 在scss中
      
      $mainSize:20px;
      html{font-size:$mainSize;}
      @function f($px){
        @return $px/$mainSize/2*1rem;
      }
    • 在页面进行缩放时更新根节点字体大小(设计稿640)
      $(window).ready(function(){
          $('html').css({'font-size': $(window).width() / 320 *20});
      });
      $(window).resize(function(){
          $('html').css({'font-size': $(window).width() / 320 *20});
      });

    2. 通过js计算缩放比例控制适配(transform: scale(scale);),页面上最外层元素加上类名adapt

    var adapt= {
        styleRule: {
            add: function(a, b) {
                var c = document.styleSheets[document.styleSheets.length - 1];
                c.cssRules ? c.insertRule(a + "{" + b + "}", c.cssRules.length) : c.addRule(a, b)
            },
            remove: function(a) {
                for (var b = 0; b < document.styleSheets.length; b++) {
                    var c = document.styleSheets[b];
                    c.cssRules ? function() {
                        for (var b = 0; b < c.cssRules.length; b++) c.cssRules[b].selectorText == a && c.deleteRule(b)
                    }() : c.removeRule(a)
                }
            }
        },
        reset: function() {
            adapt.styleRule.remove(".adapt")
        },
        render: function(a) {
            function b() {
                adapt.scale = e / 320;
                adapt.styleRule.add(c, d.replace("{scale}", adapt.scale));
            }
            var c, d = "-webkit-transform:scale({scale});-webkit-transform-origin:0px 0px 0px;margin:0px;320px;";
            document.querySelectorAll(".adapt")[0] ? (c = ".adapt", d += "overflow:hidden;") : (console.warn(".adapt is undefined, open the default settings"), c = "body");
            var e = window.innerWidth;
            document.body.clientWidth <= window.innerWidth && (e = document.body.clientWidth),
            a ? setTimeout(function() {
                b()
            }, 110) : b();
        },
        init: function() {
            var a = "onorientationchange" in window ? "orientationchange": "resize";
            window.addEventListener(a, function() {
                adapt.render()
            });
        }
    };
    adapt.init();
    adapt.render();

     3. 自执行方法

    (function(win,doc){
        change();
        function change(){
            doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/375+'px';
        }
        win.addEventListener('resize',change,false);
        win.addEventListener('orientationchange',change,false); 
    })(window,document);
  • 相关阅读:
    POJ 1003 解题报告
    POJ 1004 解题报告
    POJ-1002 解题报告
    vi--文本编辑常用快捷键之光标移动
    常用图表工具
    September 05th 2017 Week 36th Tuesday
    September 04th 2017 Week 36th Monday
    September 03rd 2017 Week 36th Sunday
    September 02nd 2017 Week 35th Saturday
    September 01st 2017 Week 35th Friday
  • 原文地址:https://www.cnblogs.com/colima/p/5884779.html
Copyright © 2011-2022 走看看