瀏覽代碼

重设媒体查询条件

gcz 2 年之前
父節點
當前提交
3466f6e558
共有 3 個文件被更改,包括 26 次插入4 次删除
  1. 10 1
      src/assets/scss/media.scss
  2. 15 2
      src/components/header.vue
  3. 1 1
      src/components/numerical.vue

+ 10 - 1
src/assets/scss/media.scss

@@ -42,7 +42,16 @@
     }
 }
 // 苹果笔记本
-@media only screen and (max-width : 1600px) and (max-height : 2560px) {
+// @media
+//   only screen and (-webkit-min-device-pixel-ratio: 2.0),
+//   only screen and (   min--moz-device-pixel-ratio: 2.0),
+//   only screen and (     -o-min-device-pixel-ratio: 2.0/1),
+//   only screen and (        min-device-pixel-ratio: 2.0),
+//   only screen and (                min-resolution: 227dpi),
+//   only screen and (                min-resolution: 2.0dppx) { 
+//     /* Retina styles here */
+// }
+@media only screen and (min-height : 800px) and (max-width : 1280px) {
     //小班滚动
     .right-wrap{
         .scroll-board-wrap{

+ 15 - 2
src/components/header.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-06-14 18:11:54
  * @LastEditors: gcz
- * @LastEditTime: 2022-06-29 15:17:34
+ * @LastEditTime: 2022-06-29 17:41:01
  * @FilePath: \castgroup_bigscreen\src\components\header.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -162,7 +162,7 @@ import timeFormat from '@/utils/timeFormat'
         }
     }
 }
-@media only screen and (max-width : 1600px) and (max-height : 2560px) {
+@media only screen and (min-height : 800px) and (max-width : 1280px) {
     .top-box{
         h2{
            letter-spacing: 1px;
@@ -171,5 +171,18 @@ import timeFormat from '@/utils/timeFormat'
         }
     }
 
+}
+@media only screen and (min-height : 768px) and (max-width : 1024px) {
+    .top-box{
+        h2{
+           letter-spacing: 1px;
+            font-size: 24px;
+            text-indent: -0.8em; 
+        }
+        .top-time{
+            font-size: 16px;
+        }
+    }
+
 }
 </style>

+ 1 - 1
src/components/numerical.vue

@@ -94,7 +94,7 @@
         }
     }
 }
-@media only screen and (max-width : 1600px) and (max-height : 2560px) {
+@media only screen and (min-height : 800px) and (max-width : 1280px) {
     .numerical{
 
         .item-wrap{