我应该编码什么分辨率？ [关闭]答案

【问题标题】：What resolutions should I code for? [closed]我应该编码什么分辨率？ [关闭]
【发布时间】：2013-05-09 21:01:25
【问题描述】：

我需要一个我应该编码的桌面和移动分辨率列表。

我正在用no-scroll 和overflow: hidden; 创建一个页面，所以我需要为每个desktop resolution 和mobile resolution 调整页面，所以如果可能的话，我只需要一个列表。

【问题讨论】：

您的用户使用什么分辨率？一般来说，您的网站在所有合理的分辨率上都应该看起来不错。如果你的 CSS 结构正确，那么你不应该添加对特定分辨率的支持
你可以寻找twitter-bootstrap响应式设计。
有很多分辨率......具有不同的像素率......纵向和横向......
定位特定分辨率没有任何意义。尤其是在桌面上，浏览器窗口可以是任意大小、任意缩放级别和任意大小的屏幕，因此实际上没有任何标准尺寸。
如 Juhana 所说，设计流畅，让您的网站在所有分辨率下看起来都不错，并在需要时使用媒体查询来更正布局

标签： html css web-applications screen-resolution

【解决方案1】：

您可以参考CSS Tricks 获取Media Queries for Standard Devices。这包括纵向和横向布局。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

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

也有许多在线 sn-ps 可用：

【讨论】：

【解决方案2】：

通过@media 查询使用响应式 CSS .. 像这样

@media only screen and (max-width: 320px) {
    .container {width: 100%;}   
    .dropdown {height:35px;}
    .dropdown p {line-height:35px;}
    .header {height:40px; background:url(images/logoplastik.png) no-repeat 10px 90% left center ;   }
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
    .container {width: 100%; }
    .dropdown {height:35px;}
    .dropdown p {line-height:35px;}
    .header {height:40px; padding-left:10px;}
}

【讨论】：