Question

在目前建立的RWD网站上，用于移动（iphone）/标签（ipad）/笔记本电脑屏幕（1366X768像素）的媒体查询是：

/*  #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
@media only screen and (min-width: 100px) and (max-width: 479px)

/* #Mobile (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px)

/* #Tablet (Portrait)
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px)

/* #Tablet (Landscape)
----------------------------------------------------------------------*/
@media all and (min-width: 1400px) and (max-width: 1920px)

/* Smaller than standard 960 (devices and browsers) and larger devices */
@media only screen and (min-width: 959px) and (max-width: 1177px)

/* Desktops and laptops (laptop browser version styles) ----------- */
@media only screen and (min-width : 1224px) and (max-width: 1366px)

这些是正确使用的吗？

Answer 1

是的，还包括这些用于完美的RWD

// Little larger screen
@media only screen and (min-width: 480px) {

}

// Pads and larger phones
@media only screen and (min-width: 600px) {

}

// Larger pads
@media only screen and (min-width: 768px) {

}

// Horizontal pads and laptops
@media only screen and (min-width: 992px) {

}

// Really large screens
@media only screen and (min-width: 1382px) {

}

// 2X size (iPhone 4 etc)
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

} 如果你使用Sass，这是我一直在使用的一个小技巧：

$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";

//等然后

@media #{$laptop-size} {
    // Styling here...
}

媒体查询帮助，这些是正确的使用？

1 个答案: