Question

我正在使用普通桌面屏幕的媒体查询，而idt不适用于大屏幕。但是下面的媒体查询也适用于大型桌面屏幕。请更正我的媒体查询，提前获取所有帮助。

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

Answer 1

优化大型显示器的挑战围绕如何扩展和管理内容。您需要在某些点假设屏幕宽度。

示例：，用于课程＆＃34;容器＆＃34;

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

Answer 2

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

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


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

Answer 3

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

    @media (min-width: 2000) {
    }

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

Answer 4

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

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

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

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

Answer 5

@media屏幕和（最小宽度：1400像素）{

} @media屏幕和（最小宽度：1600像素）{

} @media屏幕和（最小宽度：1900px）{

}

Answer 6

用于响应式设计的媒体查询

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

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

6 个答案: