Responsive design 如何使460像素的屏幕显示缩小了的640像素的设计，同时还有一个320像素的模板？

视口、@media、像素比率等等都让我很难受。我有一个智能手机（响应式）网站，带有一个320px和一个640px模板，我希望实现以下目标：

高达320px宽度：显示320px模板

从321像素到639像素宽度：显示缩小到适合屏幕的640像素模板

640px或更高：显示640px模板（无缩放）

---

（640px模板有真正640px宽度的图像和内容，因此我想缩放应该通过视口或元标记来完成）

使用mediaqueries进行mobile first设计，如

@media only screen  and (max-device-width : 320px) {

/* Styles 320px */
.imageContainer{display:none} /*example for image containing element*/
}

对于中等屏幕

@media only screen and (min-device-width : 321px)
    and (max-device-width : 639px) {

    /* Styles upto 640px */
    .imageContainer{display:none}
    }

对于高于640px的屏幕

@media only screen  and (min-device-width : 640px) {

    /* Styles above 640px */
    .imageContainer{
       display:block;
     }
    .imageContainer img{
      width:100%; /*gives full width to all images on this viewport*/
      height:auto;
       }
    }

用于视网膜显示器，如iPhone4和iPad等

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

是的，缩放视口是通过头部包含的元标记来维护的，元标记是：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />

Tnx为您提供答案，但这不是我想要的答案：我不想要321-639像素的第三种设计。我想将其保持在2（320和640），例如480设备可以看到640设计缩小。这是我遇到麻烦的最后一部分。我没有为响应性设计定义不同的宽度范围的问题。我不是建议您添加第三种设计。我举了一个例子，这完全取决于你。你有没有尝试过我提到的其他东西，比如视口元标记和视网膜显示的mediaqueries。我也尝试过改变视口，但没有成功。是否有一个视口设置显示“无论屏幕宽度如何，都以全宽显示”？因此，如果屏幕宽度是480px，设计是1024px，它会被放大很多，所以1024px会被压缩成480px。如果屏幕是480px，而设计是640px，它会以同样的方式缩小，但缩小的幅度会更小。如果屏幕为480px，设计为320px，则会放大。你能帮我吗？第一个是可能的，在每个mediaquery中定义宽度非常简单：100%；它将根据视口大小自动调整大小。但它不可能放大缩小。只有一种解决方案是在差异较小的视口中定义7-8个或更多MediaQuery，并根据这些大小声明该框/元素的每个宽度。这样你就可以得到灵活的高度/宽度的元素，如放大或缩小。我害怕这一点，这不是我正在寻找的解决方案，但tnx为您的时间和努力！