桌面版本的响应尺寸？

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