定位、定尺寸时避免使用vh

src/App.vue

@@ -66,18 +66,18 @@ html,body{
 
 .slide-to-next-page-enter {
   position: fixed;
-  top: 100vh;
+  top: 100%;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .slide-to-next-page-enter-to {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .slide-to-next-page-enter-active {
@@ -88,16 +88,16 @@ html,body{
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .slide-to-next-page-leave-to {
   position: fixed;
-  top: -100vh;
+  top: -100%;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .slide-to-next-page-leave-active {
@@ -135,8 +135,8 @@ html,body{
   bottom: 0;
   top: 0;
   object-fit: cover;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   z-index: -2;
 }
 </style>

src/assets/style/reset.css

@@ -53,9 +53,4 @@ table {
 button {
   padding: 0;
   cursor: pointer;
-}
-
-html {
-  /* 设计稿里查看rem值，根元素font-size设为64px。 */
-  font-size: 2.5276vh; 
 }

src/main.js

@@ -23,8 +23,14 @@ if (process.env.NODE_ENV === 'development') {
   Vue.prototype.$publicPath = '/nanjing/'
 }
 
+document.documentElement.style.fontSize = window.innerHeight * 0.025276 + 'px'
+window.addEventListener('resize', () => {
+  document.documentElement.style.fontSize = window.innerHeight * 0.025276 + 'px'
+})
+
 new Vue({
   router,
   store,
   render: h => h(App),
 }).$mount('#app')
+

src/views/AppCover.vue

@@ -98,52 +98,52 @@ export default {
 <style lang="less" scoped>
 .comp-root {
   position: absolute;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   background: white;
 }
-.top-image {
-  width: 100vw;
-  height: 39.2237vh;
-  object-fit: cover;
-  object-position: center bottom;
-}
-.title {
-  position: fixed;
-  height: 44.894vh;
-  width: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 13.069vh;
-}
-.museum-logo {
-  position: fixed;
-  left: 2.28rem;
-  bottom: 6.547vh;
-  height: 3.438vh;
-}
-.our-logo {
-  position: fixed;
-  right: 2.28rem;
-  bottom: 6.547vh;
-  height: 3.438vh;
-}
-.background-image {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  object-fit: cover;
-  width: 100vw;
-  height: 100vh;
-  z-index: -1;
-}
+// .top-image {
+//   width: 100%;
+//   height: 39.2237vh;
+//   object-fit: cover;
+//   object-position: center bottom;
+// }
+// .title {
+//   position: fixed;
+//   height: 44.894vh;
+//   width: auto;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   bottom: 13.069vh;
+// }
+// .museum-logo {
+//   position: fixed;
+//   left: 2.28rem;
+//   bottom: 6.547vh;
+//   height: 3.438vh;
+// }
+// .our-logo {
+//   position: fixed;
+//   right: 2.28rem;
+//   bottom: 6.547vh;
+//   height: 3.438vh;
+// }
+// .background-image {
+//   position: fixed;
+//   left: 0;
+//   right: 0;
+//   bottom: 0;
+//   top: 0;
+//   object-fit: cover;
+//   width: 100%;
+//   height: 100%;
+//   z-index: -1;
+// }
 .frame {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-  height: 100vh;
+  height: 100%;
 }
 .loading {
   position: fixed;

src/views/Chart.vue

@@ -630,8 +630,8 @@ export default {
 <style lang="less" scoped>
 .chart {
   position: absolute;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   .picker {
     width: 7.08rem;

src/views/ExhibitionDetail.vue

@@ -217,12 +217,12 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     z-index: 1;
     iframe {
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
     }
   }
   .vwcon {

src/views/ExhibitionDetailAnimation.vue

@@ -74,8 +74,8 @@ export default {
 <style lang="less" scoped>
 .root {
   position: relative;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   background: white;
   h2 {
@@ -87,7 +87,7 @@ export default {
   }
   img {
     position: absolute;
-    height: 100vh;
+    height: 100%;
     top: 0;
     left: 50%;
     transform: translateX(-50%);

src/views/Home.vue

@@ -112,8 +112,8 @@ export default {
 .home-page {
   position: relative;
   text-align: center;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   .top-wrapper {
     margin-top: 2.72rem;
@@ -176,8 +176,8 @@ export default {
     bottom: 0;
     top: 0;
     object-fit: cover;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     z-index: -1;
   }
 }

src/views/TreeAnimation.vue

@@ -79,8 +79,8 @@ export default {
 
 <style lang="less" scoped>
 .tree-animation {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: white;
   position: relative;
   img {

src/views/TreeSelection.vue

@@ -298,8 +298,8 @@ export default {
 <style lang="less" scoped>
 .tree-selection {
   position: relative;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: white;
   .popup-mask {
     position: absolute;