Skip to content

Commit 66550d3

Browse files
easyshellworldeasyshellworld
authored
Merge pull request #72 from easyshellworld/dev
docs: Add responsive design for multiple screen sizes
2 parents d68d97b + 56107d6 commit 66550d3

2 files changed

Lines changed: 693 additions & 9 deletions

File tree

‎public/ppt/ppt-zh.html‎

Lines changed: 353 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
.slide {
2323
width: 100vw;
24-
height: 100vh;
24+
min-height: 100vh;
2525
display: flex;
2626
flex-direction: column;
2727
justify-content: center;
@@ -345,7 +345,6 @@
345345
/* 添加在现有的 CSS 中 */
346346
.larger-image {
347347
max-width: 700px !important;
348-
/* 或者你想要的更大尺寸 */
349348
}
350349

351350
/* 或者更具体的针对第三页的样式 */
@@ -395,7 +394,7 @@
395394
flex-wrap: wrap;
396395
justify-content: center;
397396
gap: 0.5rem;
398-
margin: 0.5rem 0; /* 减少上下间距 */
397+
margin: 0.5rem 0;
399398
}
400399

401400
.badge {
@@ -505,6 +504,323 @@
505504
width: 20px;
506505
height: 20px;
507506
}
507+
508+
/* 新增：响应式设计 */
509+
510+
/* 平板设备 (768px 到 1024px) */
511+
@media (max-width: 1024px) {
512+
h1 {
513+
font-size: 3rem;
514+
}
515+
516+
h2 {
517+
font-size: 2rem;
518+
}
519+
520+
h3 {
521+
font-size: 1.75rem;
522+
}
523+
524+
p {
525+
font-size: 1.1rem;
526+
}
527+
528+
.slide {
529+
padding: 1.5rem;
530+
}
531+
532+
.feature-list li, .scenario-list li {
533+
font-size: 1rem;
534+
}
535+
536+
.tech-stack {
537+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
538+
}
539+
540+
.scenario-grid {
541+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
542+
}
543+
544+
.team-member {
545+
width: 130px;
546+
}
547+
548+
.team-member img {
549+
width: 100px;
550+
height: 100px;
551+
}
552+
553+
.navigation {
554+
bottom: 1.5rem;
555+
right: 1.5rem;
556+
}
557+
558+
.slide-counter {
559+
bottom: 1.5rem;
560+
left: 1.5rem;
561+
}
562+
563+
.partner-logo {
564+
height: 60px;
565+
max-width: 140px;
566+
}
567+
568+
.acknowledgement-title {
569+
font-size: 2rem;
570+
}
571+
}
572+
573+
/* 手机设备 (小于768px) */
574+
@media (max-width: 767px) {
575+
h1 {
576+
font-size: 2.5rem;
577+
}
578+
579+
h2 {
580+
font-size: 1.75rem;
581+
}
582+
583+
h3 {
584+
font-size: 1.5rem;
585+
}
586+
587+
p {
588+
font-size: 1rem;
589+
}
590+
591+
.slide {
592+
padding: 1rem;
593+
min-height: 100vh;
594+
height: auto;
595+
}
596+
597+
.slide-content {
598+
width: 95%;
599+
}
600+
601+
.feature-list, .scenario-list {
602+
text-align: left;
603+
padding: 0 1rem;
604+
}
605+
606+
.feature-list li, .scenario-list li {
607+
font-size: 0.95rem;
608+
margin-bottom: 0.8rem;
609+
padding-left: 1.2rem;
610+
}
611+
612+
.tech-stack {
613+
grid-template-columns: 1fr;
614+
gap: 1rem;
615+
}
616+
617+
.tech-category {
618+
padding: 1rem;
619+
}
620+
621+
.scenario-grid {
622+
grid-template-columns: 1fr;
623+
gap: 1rem;
624+
}
625+
626+
.team-members {
627+
gap: 1rem;
628+
}
629+
630+
.team-member {
631+
width: 100px;
632+
}
633+
634+
.team-member img {
635+
width: 80px;
636+
height: 80px;
637+
}
638+
639+
.navigation {
640+
bottom: 1rem;
641+
right: 1rem;
642+
}
643+
644+
.nav-btn {
645+
width: 40px;
646+
height: 40px;
647+
font-size: 0.9rem;
648+
}
649+
650+
.slide-counter {
651+
bottom: 1rem;
652+
left: 1rem;
653+
font-size: 0.9rem;
654+
padding: 0.4rem 0.8rem;
655+
}
656+
657+
.partners-container {
658+
gap: 1rem;
659+
}
660+
661+
.partner-logo {
662+
height: 50px;
663+
max-width: 120px;
664+
}
665+
666+
.acknowledgement-title {
667+
font-size: 2rem;
668+
}
669+
670+
.center-image {
671+
margin: 1.5rem auto;
672+
}
673+
674+
.small-image, .smaller-image, .larger-image {
675+
max-width: 100% !important;
676+
}
677+
678+
.badges-container {
679+
gap: 0.3rem;
680+
}
681+
682+
.badge {
683+
height: 18px;
684+
}
685+
686+
.links-container {
687+
gap: 0.8rem;
688+
}
689+
690+
.link-item {
691+
font-size: 0.9rem;
692+
}
693+
694+
.btn {
695+
padding: 0.6rem 1.2rem;
696+
font-size: 0.9rem;
697+
}
698+
699+
.demo-video-btn {
700+
padding: 0.6rem 1.2rem;
701+
font-size: 0.9rem;
702+
}
703+
704+
.arch-container {
705+
width: 100%;
706+
}
707+
708+
.arch-layer {
709+
padding: 0.8rem;
710+
}
711+
712+
.arch-layer h4 {
713+
font-size: 1rem;
714+
}
715+
716+
.arch-layer p {
717+
font-size: 0.8rem;
718+
}
719+
}
720+
721+
/* 小屏幕手机 (小于480px) */
722+
@media (max-width: 480px) {
723+
h1 {
724+
font-size: 2rem;
725+
}
726+
727+
h2 {
728+
font-size: 1.5rem;
729+
}
730+
731+
h3 {
732+
font-size: 1.25rem;
733+
}
734+
735+
p {
736+
font-size: 0.9rem;
737+
}
738+
739+
.feature-list li, .scenario-list li {
740+
font-size: 0.9rem;
741+
}
742+
743+
.team-member {
744+
width: 80px;
745+
}
746+
747+
.team-member img {
748+
width: 60px;
749+
height: 60px;
750+
}
751+
752+
.partner-logo {
753+
height: 40px;
754+
max-width: 100px;
755+
}
756+
757+
.acknowledgement-title {
758+
font-size: 1.75rem;
759+
}
760+
761+
.navigation {
762+
bottom: 0.8rem;
763+
right: 0.8rem;
764+
}
765+
766+
.slide-counter {
767+
bottom: 0.8rem;
768+
left: 0.8rem;
769+
}
770+
771+
.badge {
772+
height: 16px;
773+
}
774+
775+
.link-item {
776+
flex-direction: column;
777+
text-align: center;
778+
}
779+
780+
.link-item span {
781+
font-size: 0.8rem;
782+
}
783+
}
784+
785+
/* 横屏手机优化 */
786+
@media (max-height: 500px) and (orientation: landscape) {
787+
.slide {
788+
padding: 1rem;
789+
min-height: auto;
790+
height: auto;
791+
margin-bottom: 1rem;
792+
}
793+
794+
h1 {
795+
font-size: 2rem;
796+
margin-bottom: 1rem;
797+
}
798+
799+
h2 {
800+
font-size: 1.5rem;
801+
margin-bottom: 1rem;
802+
}
803+
804+
.center-image {
805+
margin: 1rem auto;
806+
max-width: 300px;
807+
}
808+
809+
.feature-list li, .scenario-list li {
810+
margin-bottom: 0.5rem;
811+
}
812+
}
813+
814+
/* 防止文本过小 */
815+
@media (max-width: 320px) {
816+
html {
817+
font-size: 14px;
818+
}
819+
820+
.badge {
821+
height: 14px;
822+
}
823+
}
508824
</style>
509825
</head>
510826

@@ -838,8 +1154,8 @@ <h2 class="acknowledgement-title">鸣谢</h2>
8381154
<img src="/ppt/polkadotlogo.png" alt="Polkadot" class="partner-logo">
8391155
<img src="/ppt/papermoon.png" alt="Papermoon" class="partner-logo">
8401156
<img src="/ppt/oneblock.jpg" alt="OneBlock" class="partner-logo">
841-
<img src="/ppt/wlogo.jpg" alt="W Logo" class="partner-logo">
842-
<img src="/ppt/nantang.webp" alt="W Logo" class="partner-logo">
1157+
<img src="/ppt/wlogo.jpg" alt="吾乡 Logo" class="partner-logo">
1158+
<img src="/ppt/nantang.webp" alt="南塘dao Logo" class="partner-logo">
8431159
</div>
8441160
<p>感谢 Polkadot 生态对 Web3 基础设施的支持</p>
8451161
<p>感谢所有为本项目做出贡献的开发者和社区成员！</p>
@@ -896,6 +1212,38 @@ <h2 class="acknowledgement-title">鸣谢</h2>
8961212
}
8971213
});
8981214

1215+
// 触摸滑动支持
1216+
let touchStartX = 0;
1217+
let touchEndX = 0;
1218+
1219+
document.addEventListener('touchstart', e => {
1220+
touchStartX = e.changedTouches[0].screenX;
1221+
});
1222+
1223+
document.addEventListener('touchend', e => {
1224+
touchEndX = e.changedTouches[0].screenX;
1225+
handleSwipe();
1226+
});
1227+
1228+
function handleSwipe() {
1229+
const swipeThreshold = 50;
1230+
const swipeDistance = touchEndX - touchStartX;
1231+
1232+
if (swipeDistance > swipeThreshold) {
1233+
// 向右滑动 - 上一页
1234+
if (currentSlide > 0) {
1235+
currentSlide--;
1236+
showSlide(currentSlide);
1237+
}
1238+
} else if (swipeDistance < -swipeThreshold) {
1239+
// 向左滑动 - 下一页
1240+
if (currentSlide < slides.length - 1) {
1241+
currentSlide++;
1242+
showSlide(currentSlide);
1243+
}
1244+
}
1245+
}
1246+
8991247
// 显示指定幻灯片
9001248
function showSlide(index) {
9011249
slides.forEach((slide, i) => {

0 commit comments

Comments
 (0)