Question

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

移动

@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;
    }   

}

Answer 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 */ }

Answer 2

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

这是（在我看来）更容易让移动设计首先工作并为桌面添加额外的代码而不是之后尝试将桌面设计压缩回移动版本（同时做移动设计会让你决定网站最重要的部分是什么。

此外，使用尽可能少的媒体查询 - 它们只会让您在几个月后再次回到设计时更难理解 - 如果您知道或有时间学习像CSS这样的CSS预处理器{3}}，考虑在整个CSS文件中嵌入媒体查询，作为需要它们的特定类和ID的一部分，而不是在最后的一部分中;这应该让设备大小更加明显地影响特定元素，并让您无休止地在代码中来回滚动。

Answer 3

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

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

但是，通常情况下，桌面代码不需要“定义”。您不需要为所有内容单独编码。您将拥有适用于所有内容的“默认”代码，并且应具有响应性和动态性，然后您只需要对移动设备和平板电脑进行少量更改。

响应式框架也总是很好。这样，您不必自己担心。

桌面版的响应大小？

3 个答案: