大型桌面的媒体查询是什么？答案

【问题标题】：What is the media query for large desktops?大型桌面的媒体查询是什么？
【发布时间】：2017-07-13 21:33:47
【问题描述】：

我正在对普通桌面屏幕使用媒体查询，而 idt 不应该适用于更大的屏幕。但下面的媒体查询也适用于大桌面屏幕。请更正我的媒体查询，提前感谢所有帮助。

@media (min-width: 992px) and (max-width : 1200px){//This should work for Normal desktops(15 to 18 inch) only.
}

【问题讨论】：

您在这里对“大”的定义是什么？以英寸为单位的屏幕尺寸在这里无关紧要，它是以像素为单位的分辨率。
大意味着大于 20 英寸的桌面。
大 --->(1920×900).
您的媒体查询不适用于 1200 像素以上。
请指定您想在此处放置的分辨率障碍。甚至一些 42 英寸的电视也只有全高清宽度。（1920x1080）。所以如果你在谈论 Mac 屏幕分辨率，那么它才有意义。（2560x1600）

标签： css twitter-bootstrap media-queries

【解决方案1】：

针对大型显示器进行优化的挑战主要集中在如何扩展和管理内容上。您需要假设某些点的屏幕宽度。

示例：“容器”类

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}

【讨论】：

【解决方案2】：

响应式设计的媒体查询

@media screen and (min-width: 600px) {
//For Tablets
    .container {
        width: 100;
    }
}

@media screen and (min-width: 768px) {
//For Laptops
    .container {
        width: 738px;
    }
}

@media screen and (min-width: 992px) {
//For Large Laptops
    .container {
        width: 962px;
    }
}

@media screen and (min-width: 1280px) {
//For Big TV's (HD Screens) 
    .container {
        width: 1250px;
    }
}


@media screen and (min-width: 1920px) {
//For Projectors or Higher Resolution Screens (Full HD)
    .container {
        width: 1890px;
    }
}
@media screen and (min-width: 3840px) {
//For 4K Displays (Ultra HD)
    .container {
        width: 3810px;
    }
}

【讨论】：

【解决方案3】：

只需检查您需要使用不同样式设置样式的屏幕尺寸。然后根据需要使用媒体查询。 ;)

@media screen and (min-width: 1400px) {}

@media screen and (min-width: 1600px) {}

@media screen and (min-width: 1900px) {}

【讨论】：

【解决方案4】：

您也可以尝试其中任何一种

@media only screen  and (min-width : 1224px) {
/* Styles */
}


@media only screen  and (min-width : 1824px) {
/* Styles */
}

【讨论】：

【解决方案5】：

@media screen and (min-width: 1400px) {

}
@media screen and (min-width: 1600px) {

}
@media screen and (min-width: 1900px) {

}

【讨论】：

【解决方案6】：

如果你想在 css 中定位更大的屏幕，那么你必须定义宽度标准对于大分辨率。我的意思是如果你想定位 4k 屏幕

    @media (min-width: 2000px) {
    }

在媒体查询中，屏幕分辨率是考虑屏幕尺寸的。当你使用css定位屏幕尺寸时，你必须定位屏幕分辨率范围。

【讨论】：

你在 2000 年后错过了 px。