-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
137 lines (126 loc) · 3.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PSGO折腾导航 - PS5 & PS4 & Switch</title>
<link rel="shortcut icon" href="psgo.ico">
<link rel="icon" href="psgo.ico">
<script>
if (navigator.userAgent.includes('PlayStation 5')) {
window.location.href = "aio/";
}
if (navigator.userAgent.includes('PlayStation 4')) {
window.location.href = "ps4.html";
}
</script>
<style>
/* 默认样式 */
html, body {
margin: 0;
background-color: white;
color: black;
font-size: 22px;
font-weight:bold;
}
/* 图片自适应 */
img {
width: 100%;
max-width: 300px; /* 增大最大宽度 */
height: auto; /* 保持图片比例 */
}
/* 大屏幕设备 */
@media (min-width: 1024px) {
font-size: 28px;
img {
max-width: 350px; /* 大屏幕上进一步增大图片大小 */
}
}
/* 中等屏幕设备 */
@media (max-width: 1024px) {
font-size: 24px;
table {
width: 80%;
}
img {
max-width: 250px; /* 中等屏幕下稍微调小 */
}
}
/* 小屏幕设备 */
@media (max-width: 768px) {
font-size: 18px;
table {
width: 90%;
}
.zoom {
transform: scale(1); /* 禁用放大效果 */
}
img {
max-width: 200px; /* 小屏幕下调整为适中的大小 */
}
}
/* 超小屏幕设备 */
@media (max-width: 480px) {
font-size: 16px;
table {
width: 100%;
}
img {
max-width: 150px; /* 调整超小屏幕下图片大小 */
}
}
/* 横向排列图片 */
.grid-container {
display: flex; /* 使用 flex 布局 */
justify-content: space-evenly; /* 横向分布并均匀间隔 */
align-items: center;
gap: 20px;
flex-wrap: wrap; /* 允许换行 */
}
/* 图片放大效果 */
.zoom {
transition: transform 0.3s ease;
}
.zoom:hover {
transform: scale(1.10); /* 轻微放大效果 */
}
/* 居中布局 */
.center-flex {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使父容器高度为视口高度 */
}
</style>
</head>
<body>
<div class="center-flex">
<div>
<div id="main" style="text-align:center">
<div class="grid-container">
<div>
<a href="ps4.html"><img class="zoom" src="ps4.png" alt="PS4"></a>
<p style="color:#48c9fa;">PlayStation 4</p>
</div>
<div>
<a href="ps5.html"><img class="zoom" src="ps5.png" alt="PS5"></a>
<p style="color:#61d5c2;">PlayStation 5</p>
</div>
<div>
<a href="switch.html"><img class="zoom" src="switch.png" alt="Switch"></a>
<p style="color:#f7d383;">Switch 1 × 2</p>
</div>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7VRDNYTJ1Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-7VRDNYTJ1Y');
</script>
</body>
</html>