我怎么能让一个460px的屏幕显示一个640px的设计缩小，同时有一个320px的模板

Question

Viewports， @media，像素比率等等都让我很为难。我有一个智能手机(响应式)网站，一个320px和一个640px的模板，我想实现以下目标:

不超过320px宽度:显示320px模板。

从321到639px的宽度:显示640px的模板缩小到适合屏幕。

640px或更大:显示640px模板(无缩放)

(640px模板有图像和东西是真正的640px宽度，所以我猜缩放应该由视窗或元标签完成)

Answer 1

将mediaquery用于移动优先设计，如;

@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}
    }

@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;
       }
    }

适用于Retina显示屏，如iPhone4和iPad等;

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

是的，缩放视图是由包含在你头部的Meta标签维护的，它是:

<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" />