demo变成响应式的

2 years ago · e5b9db70f4
5 changed files with 36 additions and 10 deletions
--- a/demo/less/face.less
+++ b/demo/less/face.less
@ -3,7 +3,7 @@
 .demo-face {
  .face-config {
    .config-label {
-      font-size: 14px;
+      font-size: 1.4rem;
    }
    .config-item {
    }
--- a/demo/less/main.less
+++ b/demo/less/main.less
@ -83,9 +83,7 @@ body {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  background: #3f8ce8;
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
+  border-radius: 2rem;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
@ -99,7 +97,5 @@ body {
 }

 .bi-progress-bar-bar {
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
+  border-radius: 2rem;
 }
--- a/demo/less/north.less
+++ b/demo/less/north.less
@ -6,7 +6,7 @@
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: @color-bi-text;
    background-color: #367fa9;
-    font-size: 20px;
+    font-size: 2rem;
    font-weight: 300;
  }
 }
--- a/src/case/tree/treeexpander/tree.expander.popup.js
+++ b/src/case/tree/treeexpander/tree.expander.popup.js
@ -25,8 +25,8 @@
            });

            if (o.showLine) {
-                this.popupView.element.css("margin-left", -offset * (o.layer + 1));
-                this.element.css("margin-left", offset * (o.layer + 1));
+                this.popupView.element.css("margin-left", -offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
+                this.element.css("margin-left", offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
            }

            return {
--- a/template/index.html
+++ b/template/index.html
@ -7,6 +7,32 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Demo</title>
+
+    <style>
+        html {
+            font-size: 62.5% !important;
+        }
+        @media only screen and (min-width: 320px){
+        html {
+            font-size: 46.9% !important;
+        }
+        }
+        @media only screen and (min-width: 640px){
+        html {
+            font-size: 50.8% !important;
+        }
+        }
+        @media only screen and (min-width: 750px){
+        html {
+            font-size: 54.7% !important;
+        }
+        }
+        @media only screen and (min-width: 1242px){
+        html {
+            font-size: 62.5% !important;
+        }
+        }
+    </style>
 </head>

 <body>
@ -14,4 +40,8 @@
 <div id="wrapper"></div>
 </body>
 <script src="../dist/router.js"></script>
+<script>
+    BI.pixUnit = "rem";
+    BI.pixRatio = 10;
+</script>
 </html>