Question

我有以下媒体屏幕：

/* 
768px - 1280px 
WXGA - (Windows Phone com DPI alta)
*/
@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait){}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape){}

/* 
1024px - 768px 
XGA - (Ipad)
*/
@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait){}

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

/* 
1366px - 768px 
WXGA - (Ultrabook)
*/
@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait){}

@media only screen 
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape){}

然而，有三（3）个重排具有相同的像素，因此，他正在进入第一个768px而无法为其他人修改它。

我想知道如何解决这个问题，因为我有（3）个决议如下：

768x1280

1024×768

1366×768

Answer 1

我假设你不仅仅想用几行代码，而是用于中型/大型项目。

您的方法过于强大且硬编码。您无需为每个设备和屏幕尺寸提供此特定功能。这意味着很多重复的代码。

在您的设计实现中，重点关注元素的相对+和固定大小之间的组合。
（检查一些编码良好的响应模板示例）
然后，使用@media queries观看一般屏幕尺寸并对其应用特定更改。

一个例子是：

/* 
    768px - 1024px
    XGA - (Ipad)
AND 
    768px - 1280px 
    WXGA - (Windows Phone com DPI alta)
*/

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

}



/* 
    WXGA - (Ultrabook)
    768px - 1366px 
*/

@media only screen 
and (min-width: 1281px)
and (max-width: 1680px) {

}

注意：我已使用device-width替换了width（已弃用且通常不必要）。
如果您想检查它们之间的比较：https://www.sitepoint.com/media-queries-width-vs-device-width/

它如何与媒体屏幕一起使用？

1 个答案: