云仓官网单独适配pc和移动端10%

src/views/entry/newyuncang.vue

 <template>
   <div class="content">
-    <div class="pc-content" ref="searchBar">
+    <div class="yc-content" ref="searchBar">
       <!-- 头部 -->
       <header :class="{ 'head-scroll': isScroll }">
-        <div class="header-con">
+        <div class="header-con pc-hide">
           <ul class="nav">
             <li v-if="settitle && settitle.topLogo">
               <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
@@ -203,27 +203,29 @@
     </div>
 
     <!-- 移动端 -->
-    <div class="mobile-content">
-      <div class="m-header">
-        <ul class="m-nav">
-          <li v-if="settitle && settitle.topLogo">
-            <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
-          </li>
-          <li>
-            <a href="/">首页</a>
-          </li>
-          <li v-if="navigationObj.open">
-            <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>
-          </li>
-          <li v-if="navigationObj.shop">
-            <a :href=" '//' + navigationObj.shop">云仓</a>
-          </li>
-          <li>
-            <a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>
-          </li>
-        </ul>
-      </div>
-    </div>
+<!--    <div class="mobile-content">-->
+<!--      <div class="m-header">-->
+<!--        <ul class="m-nav">-->
+<!--&lt;!&ndash;          <li v-if="settitle && settitle.topLogo">&ndash;&gt;-->
+<!--&lt;!&ndash;            <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">&ndash;&gt;-->
+<!--&lt;!&ndash;          </li>&ndash;&gt;-->
+<!--          <li>-->
+<!--            <a href="/">首页</a>-->
+<!--          </li>-->
+<!--          <li v-if="navigationObj.open">-->
+<!--            <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>-->
+<!--          </li>-->
+<!--          <li v-if="navigationObj.shop">-->
+<!--            <a :href=" '//' + navigationObj.shop">云仓</a>-->
+<!--          </li>-->
+<!--          <li>-->
+<!--            <a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>-->
+<!--          </li>-->
+<!--        </ul>-->
+<!--      </div>-->
+<!--      &lt;!&ndash; 右上角 菜单图标 &ndash;&gt;-->
+<!--      <div>menu</div>-->
+<!--    </div>-->
   </div>
 
 </template>
@@ -237,6 +239,32 @@
   import Swiper2,{Autoplay} from 'swiper';
   Swiper2.use([Autoplay]);
 
+  /** 仅对官网进行 所有适配
+   * 当 可视区域 小于 960 时，进行 移动端适配
+   * 对 html 根目录 的font-size 进行设置
+   * */
+  //是否是移动端
+  ;(function() {
+    // 获取屏幕区域的宽度
+    let w = document.documentElement.clientWidth
+    if(w < 961) {
+      // console.log(24,w);
+      // 获取html根元素
+      let htmlNode = document.querySelector('html')
+      // 设置根字体大小
+      // let htmlFSType = 1;
+      if (w/375 < 1.5) {
+        htmlNode.style.fontSize = 16 + 'px'
+      } else if ( 1.5 <= w/375 < 2) {
+        htmlNode.style.fontSize = 24 + 'px'
+      } else if (2 <= w/375 <= 2.56 ) {
+        htmlNode.style.fontSize = 32 + 'px'
+      }
+      // htmlNode.style.fontSize = w / 375 + 'px'
+      console.log("根html字体大小：",htmlNode.style.fontSize);
+    }
+  })();
+
   export default {
     name: "newyuncang",
     data() {
@@ -346,6 +374,11 @@
         ]
       }
     },
+    created() {
+      let isPc = this.IsPc()
+      console.log(111,isPc);
+      console.log(222,navigator.userAgent);
+    },
     mounted() {
       this.getIndexInfo()
       window.addEventListener('scroll', this.handleScroll, true);
@@ -356,6 +389,14 @@
     },
 
     methods: {
+       IsPc() {
+          let userAgent = navigator.userAgent
+          let Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
+          console.log('userAgent:',userAgent)
+          return Agents.some((i)=>{
+            return userAgent.includes(i)
+          })
+        },
       // 获取渠道id
       getIndexInfo() {
         let op = 'open'
@@ -483,27 +524,37 @@
     list-style: none;
   }
 
-  @media screen and (max-width: 480px) {
-    .pc-content {
-      width: 100%;
-      height: 100%;
-      display : none;
-    }
-    .mobile-content {
+  .yc-content {
     width: 100%;
     height: 100%;
   }
-  }
+  /* 手机竖屏时，可视区域的最大宽度为 480 */
+  //@media screen and (max-width: 480px) and (orientation: portrait) {
+  //  .pc-hide {
+  //    display: none!important;
+  //  }
+  //  .mobile-show {
+  //    display: none!important;
+  //  }
+  //}
 
-  @media screen and (min-width: 481px) {
-    .pc-content {
-      width: 100%;
-      height: 100%;
+  /* 手机横屏和pc最小宽度为 812px */
+  /* 手机横屏 812px 为iphoneX 横屏的设备独立像素*/
+  //@media screen and (max-width: 811px) and (orientation: landscape) {
+  //  .pc-hide {
+  //    display: none!important;
+  //  }
+  //  .mobile-show {
+  //    display: none!important;
+  //  }
+  //}
+
+  @media screen and (max-width: 961px) {
+    .pc-hide {
+      display: none!important;
     }
-    .mobile-content {
-      width: 100%;
-      height: 100%;
-      display : none;
+    .mobile-show {
+      display: none!important;
     }
   }