媒体查询iPad Pro和笔记本电脑

Question

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

因此，通常您会为iPad Pro执行此(min-device-width: 1024px) and (max-device-width: 1366px)。但是，当使用Chrome的开发工具时，您会看到有笔记本电脑屏幕尺寸，例如1280x800px和1440x900px。

我现在面临的问题是这些屏幕大小重叠。是否有解决此类问题的"标准"方法？

Answer 1

处理此操作的"标准"方法是不使用设备特定媒体查询。

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

编辑：在下面添加了一个摘要，显示了如何在不使用min-width的情况下仅使用max-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>