移動第一響應網頁設計和響應圖像問題

我創建了這種類型的電子商務網站，目的是在移動電話網絡瀏覽器上進行可視化（可能還具有可接受的平板電腦/電腦/電視的用戶體驗）。移動第一響應網頁設計和響應圖像問題

是的，響應網頁設計一個尷尬的誘惑：

http://rosposhop.herokuapp.com

正如你所看到的，我用http://getbootstrap.com/ v 3.x的，我提前爲我的CSS巨大的無知道歉。

MHH ......我最初開發的網站在心中，一個手機，主要的網站做的漂亮wath我想在人像模式中，看到這裏mokup：

mobile phone portrait now behaviour

我的想法是每一頁基本上由作爲盒的列表=放過平方」 div的320×320說或440x440像素（被定義..）：

報頭（方框）
N產品清單（再次說明：每個產品都是由方形圖像和一些textaul信息和按鈕製成的方形盒子）。
頁腳

我想的是，在橫向模式下移動電話的情況下，下一個最小像素寬度的一定條件下，我可以想象2盒如在圖像顯示這裏下面：

mobile phone landscape DESIRED behaviour

而且我想在平板電腦/ PC的可視化的情況下，箱子（讓說與圖片320×320的或440x440分辨率）可安排在一些porportional方式，F如下圖所示： tablet landscape DESIRED behaviour

我認爲某些CSS媒體查詢可以提供幫助。有什麼想法？

BTW，次要問題關於我的網站納伊夫辦法UX：我的HTML/CSS膚淺/錯誤做法的一部分......請忽略......

你認爲怎麼樣的用戶體驗和導航上面的網站？

在我的想法中，特別是在電子商務環境中的移動電話應用程序（網絡或本機）通常太複雜，會觸發/推出最初可能用於PC的「大」網站。我的方法有所不同：每個產品必須定義在一個盒子中，只需很少的按鈕即可管理購物車。

任何建議歡迎謝謝！ giorgio 推特。COM/solyarisoftware

來源

2014-07-05 Giorgio Robino

UPDATE（使用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%;} 
    }

來源

2014-07-11 07:41:39

移動第一響應網頁設計和響應圖像問題

回答

相關問題