大型桌面设备的媒体查询是什么？

Question

我正在使用媒体查询来针对普通桌面屏幕进行设置，但是不应该适用于更大的屏幕。但是下面的媒体查询也适用于大型桌面屏幕。请纠正我的媒体查询。提前感谢您的所有帮助。

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

- sireesha j

---

在这里，“大”的定义是什么？屏幕尺寸（英寸）在这里并不重要，像素分辨率才是关键。 - DavidG

大型指的是20英寸以上的台式电脑。 - sireesha j

大型--->(1920×900)。 - sireesha j

您的媒体查询不会在1200像素以上应用。 - DavidG

请在此指定您想设置的分辨率障碍。即使一些42英寸的电视也只能达到全高清宽度（1920x1080）。因此，如果您谈论的是Mac屏幕分辨率，那么这才有意义。（2560x1600） - CodeMonkey

这个链接可能对你有帮助：https://css-tricks.com/snippets/css/retina-display-media-query/ - Dipak

Answer 1

针对大型显示器进行优化的挑战在于如何缩放和管理内容。 您需要针对特定的屏幕宽度进行调整。

例如：对于类名为"container"的元素

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

- Himanshu Dhiraj Mishra

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

- Igbiriki Francis

---

有哪种笔记本电脑的宽度小于768像素？不是要炫耀，即使是我最古老的90年代型号也至少有1024x640。虽然我记得在第一批笔记本电脑中有800x600（仍然比768多！）甚至可能是640x480，但那些手提箱绝对是在CSS出现很久以前的时期。这些示例中宽度和高度可能混淆了吗？ - Torque

非常正确。 - igmrrf

有许多Android平板电脑和笔记本电脑可用768xpx。因此这很重要。大多数情况下是针对平板电脑。 - Dinith Rukshan Kumara

Answer 3

请检查您需要使用不同样式进行设计的屏幕尺寸，然后根据需要使用媒体查询。 ;)

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

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

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

- Pradeep Rajapaksha

Answer 4

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

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

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

}

- Praphant Srimonthok

Answer 5

您可以尝试以下任一方法：

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


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

- Shihab

---

我很好奇为什么要使用这些具体的像素宽度？我之前没有见过这些参数，所以我想知道您发现了什么使它们成为最佳选择？谢谢！ - ND_Coder

Answer 6

如果您想在CSS中针对更大的屏幕进行定位，则必须定义大分辨率的宽度标准。也就是说，如果您想要针对4K屏幕进行定位

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

在媒体查询中，屏幕分辨率被视为屏幕大小。当您使用CSS定位屏幕大小时，必须定位屏幕分辨率范围。

- Manij Rai

---

你在2000后面漏掉了px。 - Αntonis Papadakis