javascript 在移动友好的界面中创建投资组合项目

smdnsysy  于 12个月前  发布在  Java
关注(0)|答案(3)|浏览(100)

我目前正在制作我的作品集网站,并寻求优化个人项目显示的建议。目前,我已经实现了一个类似卡片的界面来展示我的项目,在桌面上看起来很棒。然而,在移动的设备上,只能看到一张卡片,我正在探索解决方案来增强移动的观看体验。
我考虑过使用专门针对移动的设备的旋转木马/滑块。然而,我担心这种方法可能会限制可见性,因为用户需要水平滑动卡片。这可能会导致一些项目被忽视。
如何在移动的界面上有效地呈现多个项目卡片而不影响可见性或用户体验,您有什么建议吗?
谢谢您的帮助!
https://maxbenen.github.io/MaxBenen/
[桌面Mobile](https://i.stack.imgur.com/SkYYc.png
想听听建议。

lkaoscv7

lkaoscv71#

在线项目-网格
也添加此代码

@media (max-width: 600px) {
            
            .project-grid {
                grid-template-columns: 1fr;
            }
        }

字符串

wbgh16ku

wbgh16ku2#

@media (max-width: 600px) {
        
        .project-grid {
            grid-template-columns: 1fr;
        }
    }

字符串

xuo3flqw

xuo3flqw3#

为什么不使用flex-boxes呢?在我看来,flex-boxes更有用。此外,您可以缩短卡片的高度,但可以在用户单击它时使它们以全尺寸表示(addEventBox()函数)。

相关问题