responsive-design - 如何让 460 像素的屏幕显示缩小的 640 像素设计，同时还拥有 320 像素的模板？

Question

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

最大 320px 宽度：显示 320px 模板。

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

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

（640px 模板有真正 640px 宽度的图像和东西，所以我想缩放应该由视口或元标记完成）

Answer 1

使用媒体查询进行移动优先设计，例如；

@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 等 Retina 显示器；

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