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>
  • 相关阅读:
    mysql常用函数
    主程Ry访谈录
    mongodb spring anno 查询
    mongodb 查询少少优化
    jquery table thead drop
    ubuntu 配置java,eclipse ,flex,zend,php,TomCat环境
    mongodb shell
    TCP/IP Sockets in Java 源码
    java 断点下载
    直线生成 DDA
  • 原文地址:https://www.cnblogs.com/zph666/p/12714890.html
Copyright © 2011-2022 走看看