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

Question

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

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

http://rosposhop.herokuapp.com

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

嗯......我最初开发这个网站时考虑的是手机，主要是网站在纵向模式下做得很漂亮，请在此处查看模型:

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

• 页眉(方框)

• N 个产品列表(同样:每个产品都是一个由方形图像和一些文本信息和按钮组成的方形框)。

• 页脚

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

我希望在平板电脑/个人电脑可视化的情况下，盒子(比如分辨率为 320x320 或 440x440 的图像)可以按比例排列，填充视口(viewport)，如下所示:

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

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

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

在我看来，手机应用程序(网络或 native )，尤其是电子商务环境中的应用程序，通常过于复杂，击中/适应可能最初为 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%;}
   }