桌面版本的响应尺寸？答案

【问题标题】：Responsive sizes for a desktop version?桌面版本的响应尺寸？
【发布时间】：2023-03-13 17:48:01
【问题描述】：

我正在设置响应式网站的初始基础。我已经指定了手机和平板电脑的尺寸，但不确定如何处理桌面版：

手机

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

平板电脑

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

这两个在尺寸方面是否正确设置（大致符合行业标准，我知道没有这样的！）？如何为桌面指定 1024px 以上的版本？

/* Mobile */
@media (min-width:320px) { 

    .tester {
        width:100%;
        height:500px;
        background-color:white;
    }
}

/* Tablet */
@media (min-width:640px) {

    .tester {
        width:100%;
        height:500px;
        background-color:red;
    }   

}

/* Desktop */
@media (min-width:960px) {

    .tester {
        width:100%;
        height:500px;
        background-color:blue;
    }   

}

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

给你

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

【讨论】：

谢谢。如果我简化一下这有关系吗？我不需要创建横向版本，所以删除它们会有什么后果（显示纵向版本很好）？

【解决方案2】：

考虑将其设计为“移动优先” - 即您的普通 CSS 应该在没有任何媒体查询的移动设备上正常工作，然后您逐步添加断点当您认为设计需要它们（即当它坏了）并且不是因为任何特定设备的屏幕尺寸。（也就是说，我确实喜欢检查 iPhone、iPad 等以及纵向和横向 - 但您仍然可以通过所有可能的宽度调整窗口大小来做到这一点。

（在我看来）首先让移动设计工作并为桌面添加额外的代码要比尝试将桌面设计重新压缩到移动版本中要容易得多（同时进行移动设计也会让你决定网站最重要的部分）。

此外，尽可能少地使用媒体查询——它们只会让你在几个月后重新设计时更难理解——如果你知道或有时间学习像 @ 这样的 CSS 预处理器987654321@，考虑在整个 CSS 文件中嵌入媒体查询，作为需要它们的特定类和 ID 的一部分，而不是在最后它们自己的部分中；这应该会让设备尺寸对特定元素的影响更加明显，并且可以让您在代码中无休止地来回滚动。

【讨论】：

好的，谢谢。我想我会先听取你关于移动设备的建议，我已经准备好一些媒体查询（我现在会用这些更新我的问题）。你觉得和这些一起去好吗？
请注意，iPad（包括 iPad mini）实际上是 1024x768，因此最小 768 纵向和 1024 横向。但我的主要观点是你需要的断点应该取决于你的具体设计——先让它工作，然后调整浏览器的大小，看看会发生什么；在它开始看起来不对的地方，这就是您需要媒体查询的宽度。
我已经用运行此页面的代码更新了我的问题 - teamworksdesign.com/clients/rwcmd-blog。除了白盒没有填满 iPhone 之外，这一切都正常工作。我在标题 <meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0" /> 中有这个设置
@Rob - 你还需要initial-scale=1（见MDN page on Viewport tag）

【解决方案3】：

Chris Coyier 在这里有一个非常好的清单：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

不过，一般来说，台式机的代码不需要这样“定义”。您不需要为所有内容单独编码。您将拥有适用于所有内容的“默认”代码，并且应该具有响应性和动态性，然后您只需要对移动设备和平板电脑进行小的更改。

响应式框架也总是不错的。这样，您就不必自己担心了。

【讨论】：