ipad pro 和笔记本电脑的媒体查询

Question

处理 iPad Pro 和多台笔记本电脑的媒体查询的正确方法是什么？

所以通常你会为 iPad pro 执行此操作(min-device-width: 1024px) and (max-device-width: 1366px)。但是，当使用 Chrome 的开发工具时，您会看到笔记本电脑的屏幕尺寸有 1280x800 像素和 1440x900 像素。

我现在面临的问题是这些屏幕尺寸重叠。 是否有解决此类问题的“标准”方法？

Answer 1

处理这种情况的“标准”方式是不使用特定于设备的媒体查询。

https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/

编辑： 在下方添加了一段代码片段，展示了如何仅使用 max-width 而无需使用 min-width，从而避免任何重叠。

div {
	width: 100px;
	height: 100px;
	background-color: grey;
}
@media screen and (max-width: 780px){
	div {
			background-color: green;
	}
}
@media screen and (max-width: 480px){
	div {
			background-color: blue;
	}
}
@media screen and (max-width: 300px){
	div {
			background-color: yellow;
	}
}

<div></div>