移动第一响应式网页设计和响应式图像问题

Question

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

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

http://rosposhop.herokuapp.com

如您所见，我使用了http://getbootstrap.com/ v.3.x 我对CSS的无知感到抱歉。

嗯......我最初开发的网站都考虑到了手机， 并且主要是网站在肖像模式下做得很漂亮，请看这里的mokup：

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

• 标题（方框）

• N个产品清单 （同样：每个产品都是一个方形盒子，由方形图像和一些textaul信息和按钮组成）。

• 页脚

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

我想在平板电脑可视化的情况下， 盒子（比如分辨率为320x320或440x440的图像）可以按照一些porportional的方式排列，填充视口，如下所示：

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

顺便说一句，小问题 关于我的网站naif方法的用户体验： 我的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%;}
   }