zoukankan      html  css  js  c++  java
  • 移动端布局 rem,和px

    1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂。

    // rem 布局重定义
    (function(){
        $('html').css('font-size', ($(window).width() - 2) / 10);
        var multiple = parseFloat($('html').css('font-size')) / ($(window).width() - 2) * 100;
        if(multiple != 10){
            $('html').css('font-size', ($(window).width() - 2) / multiple);
        }
        document.write('<meta name = "format-detection" content = "telephone=no">');
    })();

    2.360布局就是说把屏幕按照360的尺寸自动放大缩小,这样用px就可以兼容所有手机了。

    (function (window, document, width) {
      var content = "user-scalable=no,width=" + width;
      if( window.PhoneSystem.name == "Android" && window.parseInt(window.PhoneSystem.version[0]) <= 4 && window.parseInt(window.PhoneSystem.version[1]) < 5) {
        content += ",target-densitydpi=device-dpi";
      }
      content += ",initial-scale=" + window.screen.width / width;
      content += ",minimum-scale=" + window.screen.width / width;
      content += ",maximum-scale=" + window.screen.width / width;
      var meta = document.createElement("meta");
      meta.setAttribute("name", "viewport");
      meta.setAttribute("content", content);
      var head = document.getElementsByTagName("head")[0];
      head.insertBefore(meta, document.getElementsByTagName("meta")[0]);
    })(window, document, 360);

  • 相关阅读:
    Python:三元运算
    SaltStack部署服务及配置管理apache+php-第二篇
    SaltStack介绍及简单配置-第一篇
    git基础常用维护命令
    MySQL设置只读模式
    运维杂记-05
    Tomcat的配置,设置内存,获取用户IP
    Linux系统巡检项目
    Redis维护
    nginx配置文件说明
  • 原文地址:https://www.cnblogs.com/xianxianxxx/p/7851131.html
Copyright © 2011-2022 走看看