zoukankan      html  css  js  c++  java
  • 移动端布局案例

    rem布局,参考:https://www.jianshu.com/p/86f46ad5b51d

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="../../css/mui.min.css" rel="stylesheet" />
            <script src="../../js/mui.js"></script>
            <script src="../../js/vue.js"></script>
            <style>
                body{max- 750px; min- 320px; margin: 0 auto; background-color: #F5F5F5;overflow-x: hidden;
                    font-family: -apple-system,Helvetica,sans-serif;}
                div{font-size: .26rem; color: #474747;line-height: 2;}
                span{font-size: .28rem; color: #D1021F;}
            </style>
            <script>
                (function(doc, win) {
                    var w = document.documentElement.clientWidth;
                    if (w > 750) {
                        w = 750
                    } else if (w < 320) {
                        w = 320
                    }
                    var f = w / 750 * 100 + "px";
                    document.documentElement.style.fontSize = f;
                    var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function() {
                            var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
                            if (clientWidth > 750) {
                                clientWidth = 750
                            } else if (clientWidth < 320) {
                                clientWidth = 320
                            }
                            if (!clientWidth) return;
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        };
                
                    if (!doc.addEventListener) return;
                    win.addEventListener(resizeEvt, recalc, false);
                    doc.addEventListener('DOMContentLoaded', recalc, false);
                })(document, window);
            </script>
        </head>
  • 相关阅读:
    中心极限定理
    BCEloss和交叉熵损失的区别
    postgresql的python接口
    DataGrip 2020.1 安装与激活方法
    区块链技术
    TensorRT推理加速推断并提高吞吐量
    纯视觉取代slam做路径规划及避障的思路
    DL重新回顾总结
    OpenCV 轮廓方向
    OpenCV 低通滤波(可设置频率)
  • 原文地址:https://www.cnblogs.com/zph666/p/12714890.html
Copyright © 2011-2022 走看看