响应式设计像素宽度的清晰度答案

【问题标题】：Clarity on responsive design pixel width响应式设计像素宽度的清晰度
【发布时间】：2013-07-11 23:11:19
【问题描述】：

刚接触响应式设计，我正在努力解决问题。

Galaxy Note 2 的像素尺寸为 1280 x 720，我指定了以下 CSS：

@media (min-width:769px){
     #mobile{
         display:none;
     }
     #tablet{
         display:none;
     }
     #desktop{
         width:100px;
         float:left;
         background-color:green;
     }
 }
 @media (min-width:321px) and (max-width:768px){
     #desktop{
         display:none;
     }
     #tablet{
         width:100px;
         float:left;
         background-color:black;
         color:white;
     }
     #mobile{
         display:none;
     }
 }

 @media (max-width:320px){
     #desktop{
         display:none;
     }
     #mobile{
         width:100px;
         float:left;
         background-color:blue;
         color:white;
     }
     #tablet{
         display:none;
     }
 }

手机（如预期）显示网站的移动“版本”，但我不明白为什么它具有前面提到的尺寸时属于

下面的代码是这样做的吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

希望对此有所帮助！谢谢:)

【问题讨论】：

您禁用缩放（最大比例、用户可缩放）是否有特殊原因？用户通常不喜欢这样...
我不太明白那行代码，我刚刚读过它。我在网上看到了，并询问代码的作用比什么都重要！我正试图掌握（通常）从移动设备到平板电脑再到桌面设备的变化！
感兴趣的：designshack.net/articles/css/…、coding.smashingmagazine.com/2012/03/22/…、blog.cloudfour.com/…
我一定会读一读的。立即，我看到第一篇文章是关于内容特定的设计，而不是设备优先。我主要从这个问题中想了解的是，平板电脑或手机的屏幕像素故障要少得多？

标签： css responsive-design

【解决方案1】：

这是因为 css 使用与设备像素不同的“设备独立像素”。您还可以使用像素比的媒体查询来选择像素密度更高的设备。

A List Apart: A Pixel Identity Crisis

另外，请注意实际分辨率并不低。浏览器只是使用了不同的度量单位。

【讨论】：

那篇文章正是我所追求的。我了解基于内容等开发响应式设计的必要性，但无法理解当硬件像素不同时它如何缩小。真的很感激！
晚了将近 6 年，但我会回应这种观点。我读过的所有文章都没有详细说明，只是称它们为“CSS 像素”，包括 Mozilla。 A List Apart 的一篇非常好的文章。

【解决方案2】：

某些移动设备上的浏览器使用较低的分辨率来加速渲染器。可以使用JS查看浏览器使用的宽高。

alert('Window: '+$(document).width()+'x'+$(document).height());

小提琴：http://jsfiddle.net/fGVAg/

【讨论】：

我明白了，这很有趣。这些尺寸如何变化有什么规律吗？那么它们被称为视口吗？