Question

我目前正在我的组合网站工作,并寻求关于优化展示我个人项目的建议。目前,我安装了像卡这样的接口,以显示我的项目,这些项目在桌面上看得很出色。然而,在移动设备上,只有一张卡可以看,而Im可以探讨加强流动观察经验的解决办法。

我设想特别为移动设备使用一辆汽车/车轮。然而,我担心这种做法可能会限制可见度,因为用户需要横向通过卡片进行滑坡。这可能使一些项目得不到注意。

你们是否就如何在不损害知名度或用户经验的情况下在移动界面上有效地提供多个项目卡提出建议?

感谢你的帮助!

https://maxbenen.github.io/MaxBenen/

[Desktop Mobile(

努力获得咨询意见。

Answer 1

在项目-grid。

Add this code too

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

Answer 2

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

Answer 3

Why don t you do it with flex-boxes In my opinion, flex-boxes are more useful Also, you can shorten the card height but can make them represent in full size when the user clicks on it (addEventListener() function)

友情链接