响应式网页设计媒体查询CSS

Question

我将要设计一个响应式网站，但是对于使用媒体查询来设置移动设备和桌面的分辨率还有些小疑问。

我的客户使用的PC分辨率是1920*1080。
我的开发机器分辨率是1366*768。

这里我使用了媒体查询。

   /* Media queries */
@media screen and (max-width: 1920px) {
body{
width:1000px;
margin:0 auto;
}
 //some coding here
}

但是问题是使用这个媒体查询并不能适用于我的客户的分辨率。

另一件事是我需要在移动设备上展示它。
如何获取移动设备的分辨率？
如何设置移动设备(而不是平板电脑)的媒体查询最大宽度？

- TechGuy

---

他的完整窗口分辨率为1920 x 1080，但他的浏览器窗口是否那么大呢？这就是媒体查询所关注的。 - brouxhaha

不要泄气，但是也有很多现成的框架，比如Bootstrap和Zurb Foundation - 只要使用其中一个就可以节省很多时间。 - Sinister Beard

在lexus.ca上，我们将768px及以下定义为移动设备，1024px及以下定义为平板电脑，而1024px以上则为桌面电脑。这仅影响页面的显示方式。如果您将窗口调整为该大小，您可以从浏览器中查看移动设备的显示。希望这可以帮助您，PC的分辨率并不是媒体查询所关注的内容。媒体查询关注的是浏览器宽度，这可能会有所不同。并非所有人都在1920屏幕上拥有全宽度的浏览器窗口。 - Huangism

@user850307，我们不针对设备进行定位，因为这样会限制您的未来发展。我们只是针对宽度进行定位。只要宽度适合，就可以在任何浏览器上看到不同的视图。768 是我们将网站转换为移动视图的宽度，但它也可以在桌面上查看。 - Huangism

同意Huangism的解释，那是正确的。 - TechGuy

Answer 1

由于几个问题，很难精确匹配您客户的分辨率。

DFDatabaseAdmin是正确的，仅因为您针对1920x1080进行目标设置，并不意味着该分辨率将可用。滚动条、窗口边框以及占用浏览器网页区域（“视口”或“屏幕”）的任何插件都会导致实际可用宽度小于1920x1080。

响应式设计的更好解决方案是始终为每个媒体查询预留15-20像素的空间，以便滚动条和窗口边框不会阻止达到理想宽度。因此，如果我想要针对1024像素宽度及以下进行目标设置，我会将最大宽度指定为1010像素。

至于您的客户PC，您可以在其最小宽度上执行媒体查询，而不是最大宽度。因此，不是这样：

  @media screen and (max-width: 1920px){
      #code here
  }

您可以使用这个：

  @media screen and (min-width: 1900px){
      #code here
  }

当我建立响应式网站时，我通常使用Zurb的Foundation作为我的响应式框架来节省大量时间，但是如果您想要完全自定义的体验，则手动编写响应式代码是实现的方法。对于我的响应式网站，我使用1010px（桌面），780px（平板电脑）和600px（移动设备）。然而，请不要感到惊讶，如果您需要创建自己的媒体查询来更改某些区域的早期或晚期效果。希望这可以帮到您。

- jmoody1988

---

滚动条的宽度通常在15-20个字符之间，因此这也会失败： “因此，如果我想针对1024像素的宽度及以下进行定位，我将指定1010像素作为最大宽度。” - Anthony Cregan

Answer 2

如果您正在设计类似维基百科的全宽网站，则需要根据常见分辨率设置媒体查询，包括移动设备、平板电脑和个人电脑。例如：

    /* For mobile devices and Tablet */
    @media screen (min-width: 320px) and (max-width: 768px) {
      #code here
    } 

    /* For PC with minimum resolution till your PC resolution */ 
    @media screen (min-width: 769px) and (max-width: 1400px) {
      #code here
    }
    /* For Screen Higher than 1400px */ 
    @media screen (min-width: 1401px) {
      #code here
    } 

根据您的设计使用上述代码。

或者，如果您不想担心分辨率问题，请为分辨率高于768px的设备设置固定容器宽度。因此，无论客户端PC的分辨率如何，它都将根据您的大小进行固定。

- Karthikeyan