Pārlūkot izejas kodu

feat: rem优化

cuiyalong 1 gadu atpakaļ
vecāks
revīzija
0a3f3ec21e

+ 172 - 0
src/jfw/modules/app/src/web/staticres/jyapp/css/rem.css

@@ -0,0 +1,172 @@
+/* 默认样式 */
+html {
+  font-size: 16px; /* 默认的REM基准值 */
+}
+
+/* 320px */
+@media (max-width: 320px) {
+  html {
+    font-size: 40px;
+  }
+}
+
+/* 340px */
+@media (min-width: 321px) and (max-width: 340px) {
+  html {
+    font-size: 42px;
+  }
+}
+
+/* 360px */
+@media (min-width: 341px) and (max-width: 360px) {
+  html {
+    font-size: 44px;
+  }
+}
+
+/* 380px */
+@media (min-width: 361px) and (max-width: 380px) {
+  html {
+    font-size: 46px;
+  }
+}
+
+/* 400px */
+@media (min-width: 381px) and (max-width: 400px) {
+  html {
+    font-size: 48px;
+  }
+}
+
+/* 420px */
+@media (min-width: 401px) and (max-width: 420px) {
+  html {
+    font-size: 50px;
+  }
+}
+
+/* 440px */
+@media (min-width: 421px) and (max-width: 440px) {
+  html {
+    font-size: 52px;
+  }
+}
+
+/* 460px */
+@media (min-width: 441px) and (max-width: 460px) {
+  html {
+    font-size: 54px;
+  }
+}
+
+/* 480px */
+@media (min-width: 461px) and (max-width: 480px) {
+  html {
+    font-size: 56px;
+  }
+}
+
+/* 500px */
+@media (min-width: 481px) and (max-width: 500px) {
+  html {
+    font-size: 58px;
+  }
+}
+
+/* 520px */
+@media (min-width: 501px) and (max-width: 520px) {
+  html {
+    font-size: 60px;
+  }
+}
+
+/* 540px */
+@media (min-width: 521px) and (max-width: 540px) {
+  html {
+    font-size: 62px;
+  }
+}
+
+/* 560px */
+@media (min-width: 541px) and (max-width: 560px) {
+  html {
+    font-size: 64px;
+  }
+}
+
+/* 580px */
+@media (min-width: 561px) and (max-width: 580px) {
+  html {
+    font-size: 66px;
+  }
+}
+
+/* 600px */
+@media (min-width: 581px) and (max-width: 600px) {
+  html {
+    font-size: 68px;
+  }
+}
+
+/* 620px */
+@media (min-width: 601px) and (max-width: 620px) {
+  html {
+    font-size: 70px;
+  }
+}
+
+/* 640px */
+@media (min-width: 621px) and (max-width: 640px) {
+  html {
+    font-size: 72px;
+  }
+}
+
+/* 660px */
+@media (min-width: 641px) and (max-width: 660px) {
+  html {
+    font-size: 74px;
+  }
+}
+
+/* 680px */
+@media (min-width: 661px) and (max-width: 680px) {
+  html {
+    font-size: 76px;
+  }
+}
+
+/* 700px */
+@media (min-width: 681px) and (max-width: 700px) {
+  html {
+    font-size: 78px;
+  }
+}
+
+/* 720px */
+@media (min-width: 701px) and (max-width: 720px) {
+  html {
+    font-size: 80px;
+  }
+}
+
+/* 740px */
+@media (min-width: 721px) and (max-width: 740px) {
+  html {
+    font-size: 82px;
+  }
+}
+
+/* 760px */
+@media (min-width: 741px) and (max-width: 760px) {
+  html {
+    font-size: 84px;
+  }
+}
+
+/* 大于750的宽度尺寸 */
+@media (min-width: 761px) {
+  html {
+    font-size: 100px;
+  }
+}

+ 5 - 3
src/jfw/modules/app/src/web/staticres/jyapp/css/tabbar.css

@@ -59,15 +59,17 @@
 .van-tabbar-item__icon {
   position: relative;
   margin-bottom: .08rem;
-  font-size: .44rem
+  width: 0.48rem;
+  height: 0.48rem;
+  font-size: .44rem;
 }
 .van-tabbar-item__icon .van-icon {
   display: block
 }
 .van-tabbar-item__icon img {
   display: block;
-  width: 0.48rem;
-  height: 0.48rem;
+  width: 100%;
+  height: 100%;
 }
 
 .van-tabbar-item:not(.van-tabbar-item--active) .tabbar-img-active {

+ 1 - 1
src/jfw/modules/app/src/web/templates/common/js.html

@@ -1,2 +1,2 @@
 <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/rem.js" type="text/javascript" charset="utf-8"></script>
-<script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "mod_version"}}"></script>
+<script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}"></script>

+ 6 - 1
src/jfw/modules/app/src/web/templates/common/meta.html

@@ -1,3 +1,8 @@
 <meta charset="UTF-8" />
 <meta name="format-detection" content="telephone=no, email=no"/>
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="format-detection" content="telephone=no, email=no"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<link rel="dns-prefetch" href="//cdn-common.jianyu360.com">

+ 146 - 0
src/jfw/modules/app/src/web/templates/common/rem.html

@@ -0,0 +1,146 @@
+<style>
+/* 320px */
+@media (max-width: 320px) {
+  html {
+    font-size: 40px;
+  }
+}
+/* 340px */
+@media (min-width: 321px) and (max-width: 340px) {
+  html {
+    font-size: 42px;
+  }
+}
+/* 360px */
+@media (min-width: 341px) and (max-width: 360px) {
+  html {
+    font-size: 44px;
+  }
+}
+/* 380px */
+@media (min-width: 361px) and (max-width: 380px) {
+  html {
+    font-size: 46px;
+  }
+}
+/* 400px */
+@media (min-width: 381px) and (max-width: 400px) {
+  html {
+    font-size: 48px;
+  }
+}
+/* 420px */
+@media (min-width: 401px) and (max-width: 420px) {
+  html {
+    font-size: 50px;
+  }
+}
+/* 440px */
+@media (min-width: 421px) and (max-width: 440px) {
+  html {
+    font-size: 52px;
+  }
+}
+/* 460px */
+@media (min-width: 441px) and (max-width: 460px) {
+  html {
+    font-size: 54px;
+  }
+}
+/* 480px */
+@media (min-width: 461px) and (max-width: 480px) {
+  html {
+    font-size: 56px;
+  }
+}
+/* 500px */
+@media (min-width: 481px) and (max-width: 500px) {
+  html {
+    font-size: 58px;
+  }
+}
+/* 520px */
+@media (min-width: 501px) and (max-width: 520px) {
+  html {
+    font-size: 60px;
+  }
+}
+/* 540px */
+@media (min-width: 521px) and (max-width: 540px) {
+  html {
+    font-size: 62px;
+  }
+}
+/* 560px */
+@media (min-width: 541px) and (max-width: 560px) {
+  html {
+    font-size: 64px;
+  }
+}
+/* 580px */
+@media (min-width: 561px) and (max-width: 580px) {
+  html {
+    font-size: 66px;
+  }
+}
+/* 600px */
+@media (min-width: 581px) and (max-width: 600px) {
+  html {
+    font-size: 68px;
+  }
+}
+/* 620px */
+@media (min-width: 601px) and (max-width: 620px) {
+  html {
+    font-size: 70px;
+  }
+}
+/* 640px */
+@media (min-width: 621px) and (max-width: 640px) {
+  html {
+    font-size: 72px;
+  }
+}
+/* 660px */
+@media (min-width: 641px) and (max-width: 660px) {
+  html {
+    font-size: 74px;
+  }
+}
+/* 680px */
+@media (min-width: 661px) and (max-width: 680px) {
+  html {
+    font-size: 76px;
+  }
+}
+/* 700px */
+@media (min-width: 681px) and (max-width: 700px) {
+  html {
+    font-size: 78px;
+  }
+}
+/* 720px */
+@media (min-width: 701px) and (max-width: 720px) {
+  html {
+    font-size: 80px;
+  }
+}
+/* 740px */
+@media (min-width: 721px) and (max-width: 740px) {
+  html {
+    font-size: 82px;
+  }
+}
+/* 760px */
+@media (min-width: 741px) and (max-width: 760px) {
+  html {
+    font-size: 84px;
+  }
+}
+/* 大于750的宽度尺寸 */
+@media (min-width: 761px) {
+  html {
+    font-size: 100px;
+  }
+}
+</style>

+ 4 - 8
src/jfw/modules/app/src/web/templates/me/mine.html

@@ -1,22 +1,18 @@
 <!DOCTYPE html>
-<html lang="zh-CN" style="font-size: 50px;">
+<html lang="zh-CN">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="format-detection" content="telephone=no, email=no"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {{include "/common/meta.html"}}
     <title>我的</title>
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/weui.min.css">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/local/layout.css">
-	<link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}" />
+	  <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}" />
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/logoff/css/base.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/logoff/iconfont/iconfont.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/css/mine.css?v={{Msg "seo" "version"}}">
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/logoff/css/public.css?v={{Msg "seo" "version"}}">
 </head>
+{{include "/common/rem.html"}}
 <style>
 .toMerge{
      width:1.1rem;

+ 2 - 4
src/jfw/modules/app/src/web/templates/weixin/historypush.html

@@ -1,4 +1,4 @@
-<html lang="zh-CN" style="font-size: 50px;">
+<html lang="zh-CN">
 <head>
     {{include "/common/meta.html"}}
     <title>标讯订阅</title>
@@ -11,6 +11,7 @@
     <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/js/common.js?v={{Msg "seo" "version"}}"></script>
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/css/weui.min.css?v={{Msg "seo" "version"}}"/>
     <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/vipsubscribe/iconfont/iconfont.css?v={{Msg "seo" "version"}}"/>
+    {{include "/common/rem.html"}}
     <style>
         .merge-dialog{
           z-index: 99999;
@@ -37,9 +38,6 @@
         }
     </style>
     <script>
-      //loadJS("https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js",function(){
-       // new VConsole();
-      //});
     		function afterReceivePushMessage(type,url){
           if(type=="bid" || type=="vipreport"){
             JyObj.showRedSpotOnMenu("subscribe");

+ 1 - 2
src/jfw/modules/app/src/web/templates/weixin/search/mainSearch.html

@@ -1,4 +1,4 @@
-<html lang="zh-CN" style="font-size: 50px;">
+<html lang="zh-CN">
 <head>
 {{include "/common/meta.html"}}
 <script type="text/javascript">
@@ -767,7 +767,6 @@ var homePageInit = function(){
         // 解决ios系统click 事件300毫秒的延迟
         FastClick.attach(document.body);
       });
-      loadJS("https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js");
       //working gif
       $("#working").html('<img style="width:163px;" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/images/wx/working.gif?v={{Msg "seo" "version"}}"><div style="font-size:16px;">剑鱼标讯正在努力工作中···</div>')
     },500);

+ 1 - 2
src/jfw/modules/app/src/web/templates/weixin/tabbar.html

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href=/jyapp/css/tabbar.css />
+<link rel="stylesheet" href='/jyapp/css/tabbar.css?v={{Msg "seo" "version"}}' />
 <div id="tabbar-container">
   <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
     <div class="van-tabbar-item" name="search">
@@ -146,7 +146,6 @@ var tabbar = {
       var tabInfo = s.tabInfo
       var name = tabInfo.name
       if (name) {
-        console.log($('.van-tabbar-item[name='+name+']'))
         $('.van-tabbar-item[name='+name+']').addClass('van-tabbar-item--active').siblings().removeClass('van-tabbar-item--active')
       }
     }

+ 3 - 6
src/jfw/modules/app/src/web/templates/weixin/treasure_box.html

@@ -1,12 +1,8 @@
 <!DOCTYPE html>
-<html lang="zh-CN" style="font-size: 50px;">
+<html lang="zh-CN">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {{include "/common/meta.html"}}
     <title>百宝箱</title>
     <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
     <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css />
@@ -16,6 +12,7 @@
     <link rel="stylesheet" href='/jyapp/big-member/css/public.css?v={{Msg "seo" "version"}}'>
     <!-- <link rel="stylesheet" href='/page_treasurebox/css/merge-wx.css?v=1853'> -->
     <link rel="stylesheet" href='/jyapp/css/treasure_box.css?v={{Msg "seo" "version"}}'>
+    {{include "/common/rem.html"}}
     <script src="/jyapp/local/rem.js"></script>
   	<!-- <script src="/common-module/public/head.js"></script> -->
 </head>