移动第一响应式网页设计和响应式图像问题 [英] mobile first responsive web design and responsive images questions

问题描述

我已经建立这种电子商务网站的，其目的将被手机网络浏览器（可能具有在片剂/ PCS /电视也可接受的用户体验）可视化。

是的，一个令人尴尬的响应式网页设计诱惑：

http://rosposhop.herokuapp.com

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

Mhh ...我最初在网站上开发了一款移动手机，
，主要是该网站在肖像模式下做的很漂亮，请看这里的mokup：

我的想法是每个页面基本上都是以列表框的形式组成的=正方形div，例如320x320或440x440像素（待定义...）：

标题（方框）

N件产品清单
（再次说明：每件产品都是由方形图案和一些textaul信息和按钮制成的方形盒子）。

footer

我希望在手机处于横向模式下，在最小像素宽度的特定条件下，我可以想象2盒如在这里下面的图像示：

我希望在平板电脑/ PC可视化的情况下，
盒子（让图像的分辨率为320x320或440x440）可以以某种方式排列，填满视口，如下图所示：

我认为一些CSS媒体查询可以提供帮助。
任何想法？

BTW，小问题
关于我的网站的用户体验naif方法：
我的HTML / CSS表面的一部分/错误的方法...请忽略...

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

在我的想法中，特别是在电子商务环境中的移动电话应用程序（网络或本机）通常太复杂，会触及/推出最初用于PC的大网站。我的方法有所不同：每个产品都必须在一个盒子中定义，只需很少的按钮即可管理购物车。

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

解决方案

UPDATE（使用CSS媒体查询的解决方案草稿）

  / *产品包装盒（包含图片）* / 
.pb {
 position：relative; 
 display：inline-block; 
 text-align：left; 
 
 $ b $ *智能手机（人像）----------- * / 
 @media仅屏幕和（最大设备宽度：480px） （方向：纵向）{
 .pb {宽度：100.0％;} 
} 
 
 / *智能手机（横向）----------- * / 
 @media只有屏幕和（MAX-设备宽度：480像素）和（方向：横向）{
 .pb {宽度：49.718572％;} 
} 
  

I have created this sort of ecommerce website, with the aim to be visualized on a mobile phone web browser (possibly with an acceptable user experience on tablets/pcs/tvs also).

Yes, an awkward tempt of responsive web design:

http://rosposhop.herokuapp.com

As you can see, I used http://getbootstrap.com/ v. 3.x and I apologize in advance for my enormous ignorance on CSS.

Mhh... I developed initially the site with a mobile handset in mind, and mainly the site do pretty wath I want in portrait mode, see mokup here:

My idea is that every page is basically composed as a list of boxes = square" divs of let say 320x320 or 440x440 pixels (to be defined..):

• header (square box)

• list of N products (again: each product is a square box made by a square image and some textaul info and buttons).

• footer

I would like that in case of mobile phone in landscape mode, under certain conditions of a minimum pixel width, I could visualize 2 boxes as showed in image here below:

And I would like that in case of tablet/pc visualization, the boxes (let say images with a resolution of 320x320 or 440x440) could be arranged in some porportional way, filling the viewport, as sketced here:

I presume that some CSS media queries could help. Any idea ?

BTW, minor question about UX of my website naif approach: A part of my HTML/CSS superficial/erroneous approach... please overlook...

What do you think about user experience and navigation of the site above?

In my idea mobile phones apps (web or native) especially in ecommerce contexts, are generally too complexes, hitting off / adpating the "big" websites maybe originally made for PC. My approach have been different: every product must be defined in a single box, with few buttons to manage the cart.

Any suggestion welcome thanks! giorgio twitter.com/solyarisoftware

解决方案

UPDATE (A draft solution using CSS media queries)

    /* 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%;}
   }

这篇关于移动第一响应式网页设计和响应式图像问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！