移动优先响应式网页设计和响应式图像问题

Question

我创建了这种电子商务网站，目的是在手机网络浏览器上进行可视化（在平板电脑/个人电脑/电视上也可能具有可接受的用户体验）。

是的，响应式网页设计的尴尬诱惑：

http://rosposhop.herokuapp.com

如您所见，我使用了http://getbootstrap.com/ v. 3.x 对于我对 CSS 的巨大无知，我提前道歉。

嗯...我最初开发该网站时考虑到了手机， 主要是该网站在纵向模式下做得很好，请在此处查看模型：

我的想法是，每个页面基本上都是由 box 列表组成的 = square" div，比如 320x320 或 440x440 像素（待定义..）：

• 标题（方框）

• N 产品列表 （再次重申：每个产品都是一个由方形图像和一些文本信息和按钮组成的方形框）。

• 页脚

我希望在手机处于横向模式的情况下，在最小像素宽度的某些条件下，我可以看到如下图所示的 2 个框：

我希望在平板电脑/PC 可视化的情况下， 这些框（比如分辨率为 320x320 或 440x440 的图像）可以按比例排列，填充视口，如下所示：

我认为一些 CSS 媒体查询可能会有所帮助。 有什么想法吗？

顺便说一句，小问题 关于我的网站 naif 方法的 UX： 我的 HTML/CSS 肤浅/错误方法的一部分...请忽略...

您如何看待上述网站的用户体验和导航？

在我的想法中，手机应用程序（网络或本地），尤其是在电子商务环境中，通常过于复杂，可能最初是为 PC 制作的“大”网站。我的方法有所不同：每个产品都必须定义在一个盒子里，用几个按钮来管理购物车。

欢迎任何建议 谢谢！ 乔治 twitter.com/solyarisoftware

Answer 1

更新（使用 CSS 媒体查询的解决方案草案）

    /* product box (containing image) */
    .pb {
    position:relative;
    display:inline-block;
    text-align:left;
   }

    /* Smartphones (portrait) ----------- */
    @media only screen and (max-device-width : 480px) and (orientation: portrait) {
    .pb {width:100.0%;}
    }

    /* Smartphones (landscape) ----------- */
   @media only screen and (max-device-width : 480px) and (orientation: landscape) {
   .pb {width:49.718572%;}
   }