适配debug

src/app/layout/layout.component.css

 
-* {
-  color: white;
-}
-
 .my-custom-container {
   padding-left: 5%;
   padding-right: 5%;
@@ -19,6 +15,7 @@
   font-weight: normal;
 }
 
+
 a {
   font-weight: bold;
 }
@@ -48,14 +45,14 @@ a:hover {
   height: calc(100vh - 70px); /* 填满视窗，减去导航栏的高度 */
 }
 
-@media (max-width: 768px) {
+@media (max-width: 820px) {
   #banner {
     background-size: cover;
     background-position: left top;
   }
 
   svg {
-    height: 5vh;
+    height: 3em;
   }
 
   .details p {
@@ -72,7 +69,8 @@ a:hover {
   .cards {
     transform: translateX(12%) translateY(-5%) scale(0.8);
   }
-  .plant-grid .icon{
+
+  .plant-grid .icon {
     max-width: 10vw;
   }
 }
@@ -107,6 +105,7 @@ a:hover {
   overflow-y: scroll;
   height: 100vh; /* 将滚动容器的高度设置为100vh */
   scroll-padding-top: 4em; /* 添加底部内边距 */
+  overflow-x: hidden;
 }
 
 .priority {
@@ -116,7 +115,6 @@ a:hover {
 }
 
 
-
 /*颜色方案*/
 .bg-blue-dark {
   background-color: #021123;
@@ -301,9 +299,10 @@ a:hover {
   overflow: hidden;
   transition: transform 0.5s ease, box-shadow 0.5s ease;
 }
+
 .section-third-pic:hover {
   transform: scale(0.95);
-  box-shadow: 0 0 20px rgba(0,0,0,0.2);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }
 
 .carousel-fade .section-third-pic {
@@ -315,7 +314,7 @@ a:hover {
 }
 
 /*周边*/
-.product-lg img{
+.product-lg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -351,13 +350,46 @@ a:hover {
   opacity: 1;
 }
 
-.p-s{
+.p-s {
   font-size: 1vw;
 }
+
 @media (max-width: 768px) {
-  .p-s{
+  .p-s {
     font-size: 0.5em;
   }
 }
 
 
+/* 横屏样式 */
+@media screen and (orientation: landscape) and (max-width: 915px) {
+
+  img {
+    max-height: 25vh;
+  }
+
+  svg {
+    max-height: 12vh;
+  }
+
+  #banner img {
+    max-height: 15vh;
+    margin: 0 auto;
+  }
+
+  h1 {
+    margin: 0.4em !important;
+  }
+
+  .cards img {
+    display: none;
+  }
+
+.detailText{
+  width: 40vw;
+  display: table-cell;
+  transform: translate(0,2%);
+}
+}
+
+

src/app/layout/layout.component.html

 <div class="priorityElements">
   <!--  第一版面 包含nav+banner-->
   <div class="priority" id="background">
-    <nav class="navbar navbar-expand-lg navbar-expand-sm navbar-expand-md bg-black fixed-top">
+    <nav class="navbar navbar-expand-lg navbar-expand-sm navbar-expand-md bg-black navbar-dark fixed-top">
       <div class="container-fluid my-custom-container">
         <a class="navbar-brand d-flex align-items-center" href="https://mycard.moe/">
           <img class="logo" src="assets/img/mycardlogo.png" alt="Logo">MyCard
@@ -24,7 +24,7 @@
       </div>
     </nav>
     <div id="banner" style="position:relative" class="home-banner text-center my-custom-container">
-      <div style="width:100%;position: relative;top:100px;text-align: center;">
+      <div style="width:100%;position: relative;top:10vh;text-align: center;">
         <div class="container">
           <div class="row">
             <img
@@ -54,7 +54,7 @@
         </div>
       </div>
 
-      <div class="no-select" style="position:absolute;bottom:0;left:50%;z-index:0;color:#fff;font-size: 25px;">
+      <div class="no-select" style="position:absolute;bottom:0;left:50%;z-index:0;color:#fff;font-size: 1.2em;">
         <p style="position:relative;left: -50%;">向下
           <svg id="down" t="1688375022718" class="icon" viewBox="0 0 1024 1024" version="1.1"
                width="48" height="48">
@@ -260,7 +260,7 @@
       </div>
     </div>
 
-    <div class="d-flex align-items-center product-lg" style="height: 65vh;">
+    <div class="d-flex align-items-center product-lg justify-content-center" style="height: 65vh;">
       <div class="row">
         <div class="col-6 lg-3 col-lg-3 mb-3 mb-lg-0">
           <div class="d-flex justify-content-center image-container">
@@ -347,7 +347,7 @@
 
   </div>
   <!--决斗数据库等-->
-  <!--  大屏幕-->
+  <!--  table大屏幕-->
   <div class="priority d-none d-lg-block my-custom-container container-fluid text-center bg-blue-light"
        style="height: 65vh">
     <div class="row">
@@ -358,22 +358,22 @@
       </div>
       <!--决斗数据库-->
       <div class="col-12 col-lg-4 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
-        <p style="font-size: 40px;color:#313154">决斗数据库</p>
-        <p style="font-size: 20px;color:#313154;">
+        <p style="font-size: 2.5em;color:#313154">决斗数据库</p>
+        <p style="font-size: 1.2em;color:#313154;">
           实时 YGOPro 线上对战数据 <br/>
           卡组与卡片使用数据 <br/>
           实时玩家排行 <br/>
           排表、打印实卡比赛卡表等特色功能 <br/>
         </p>
-        <p style="font-size: 20px;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
+        <p style="font-size: 1em;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
           月进行了 {{matchCount.count}} 场对战</p>
         <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.moe/ygopro/arena")'>>>&nbsp;进入决斗数据库
         </button>
       </div>
       <!--      全明星-->
       <div class="col-4 col-lg-4 mt-lg-5 mb-lg-5 mt-0 mb-0 details">
-        <p style="font-size: 40px;color:#313154">YGOPro全明星(YAS)</p>
-        <p style="font-size: 20px;color:#313154;">
+        <p style="font-size: 2.5em;color:#313154">YGOPro全明星(YAS)</p>
+        <p style="font-size: 1.2em;color:#313154;">
           每年我们会有两个赛季 <br/>
           每个赛季都有奖励丰富的决斗大赛 - YAS <br/>
           最强的决斗者们会在此相遇，争夺荣誉 <br/>
@@ -387,8 +387,8 @@
     </div>
 
   </div>
-  <!--  小屏幕-->
-  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light" style="height:35em" >
+  <!--  table小屏幕-->
+  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light" style="height:35em">
     <div class="row">
       <div class=" mt-0 mb-0 mt-4 details">
         <div class="col-9 container-fluid text-center">
@@ -398,8 +398,8 @@
     </div>
   </div>
           <!--决斗数据库-->
-  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light" >
-    <div class="col-12 mt-0 mb-0 details">
+  <div class="priority d-lg-none my-custom-container container-fluid text-center bg-blue-light">
+    <div class="col-12 mt-0 mb-0 details detailText">
       <p style="font-size: 1.6em;color:#313154">决斗数据库</p>
       <p style="font-size: 1em;color:#313154;">
         实时 YGOPro 线上对战数据 <br/>
@@ -407,13 +407,13 @@
         实时玩家排行 <br/>
         排表、打印实卡比赛卡表等特色功能 <br/>
       </p>
-      <p style="font-size: 20px;color:#313154;">{{matchCount.year}}年{{matchCount.month}}
-        月进行了 {{matchCount.count}} 场对战</p>
+      <p style="font-size: 1em;color:#313154;">{{matchCount.year}}年{{matchCount.month}}月进行了 {{matchCount.count}}
+        场对战</p>
       <button class="btn btn-primary" (click)='navigateToUrl("https://mycard.moe/ygopro/arena")'>>>&nbsp;进入决斗数据库
       </button>
     </div>
     <!--      全明星-->
-    <div class="col-12 mt-0 mb-0 details mt-5">
+    <div class="col-12 mt-0 mb-0 details mt-5 detailText">
       <p style="font-size: 1.6em;color:#313154">YGOPro全明星(YAS)</p>
       <p style="font-size: 1em;color:#313154">
         每年我们会有两个赛季 <br/>