不同的桌面和移动视图 - 什么方法是最好的？

Question

我有一个 WWW 网站项目，其中移动版本与移动应用程序相同，但“桌面”版本完全不同。 不同的导航，不同的卡片，以不同方式划分的视图..

在 PHP/Laravel 和 HTML/CSS/JS 中执行此操作的最佳方法是什么？ 我问的是一般方法。

先感谢您。

ķ

Answer 1

这应该通过 css 使用媒体查询来完成，通过这样做，您可以根据设备大小控制卡片大小和视图。 您可以找到更多信息https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

我使用的“技巧”是使用不同的 css 样式表。

您可以为 css styles 设置最小值和最大值，fe：

@media (max-width: 600px) {
//put css here for very small screens
}
@media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
@media (min-width: 1025px) {
//put css here for large screens
}

请注意，这仅在您的 html 在所有屏幕上保持相同并且布局仅由不同的 css 定义时才有效。 但在某些情况下，这是一种可能的方法。

Answer 3

但是差异很大，我认为仅使用 CSS 是不够的。 在网格中更改元素和 position 的大小是显而易见的，并且存在于所有项目中。 这是某种边缘情况。

例如，在桌面上，我在一个视图中有两个部分的用户配置文件，但在移动设备上，我有两个专用的子页面。

在桌面上，我在导航栏中有普通菜单，但在移动设备上，每个视图都有顶部和底部的上下文按钮。

在桌面中，有些东西是模态的，但在移动中，在单独的子页面中或作为出现的文本 label（简单状态）。

...等等