0

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

移动的

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

}
4

3 回答 3

6

干得好

@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 */ }
于 2013-08-06T10:19:28.380 回答
3

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

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

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

于 2013-08-06T12:46:21.537 回答
0

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

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

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

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

于 2013-08-06T10:28:00.380 回答