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

Question

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

通常你会为iPad专业版(min-device-width: 1024px) and (max-device-width: 1366px)做这个。但是，当使用Chrome的开发工具时，您会看到笔记本电脑的屏幕尺寸如1280x800px和1440x900px。

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

Answer 1

＆＃34;标准＆＃34;处理此问题的方法是不使用特定于设备的媒体查询。

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

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;