zoukankan      html  css  js  c++  java
  • 手机端页面的布局

    页面布局用弹性盒

    加meta标签:

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
    2.height=device-height  //应用程序的高度和屏幕的高是一样的
    3.initial-scale=1.0  //应用程序启动时候的缩放尺度(1.0表示不缩放)
    4.minimum-scale=1.0  //用户可以缩放到的最小尺度(1.0表示不缩放)
    5.maximum-scale=1.0  //用户可以放大到的最大尺度(1.0表示不缩放)
    6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序,使应用程序的尺度发生一个改变(yes/no)

    res.js文件:(100px=1rem)

    //designWidth:设计稿的实际宽度值,需要根据实际设置
    //maxWidth:制作稿的最大宽度值,需要根据实际设置
    //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
    ;(function(designWidth, maxWidth) {
        var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
    
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
        refreshRem();
    
        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);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 2000);
  • 相关阅读:
    Go语言之基本数据类型
    GO语言结构、变量和常量
    Go语言介绍及环境准备
    js中的 || 和 &&
    面试记录
    惠普打印机M180N,不小心点了 升级(含固件)之后,出现错误码ER11 不是别国产硒鼓,降级固件地址如下:
    C#调用webservice wsdl文件
    C# 利用VS自带的WSDL工具生成WebService服务类
    GridView添加统计(合计)行
    联通物联网卡ICCID号校验位算法
  • 原文地址:https://www.cnblogs.com/fanting/p/9341015.html
Copyright © 2011-2022 走看看