ipad 专业版和笔记本电脑的媒体查询

Question

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

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

我现在面临的问题是这些屏幕尺寸重叠。有解决这个问题的"standard"方法吗？

Answer 1

"standard" 处理此问题的方法是不使用特定于设备的媒体查询。

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>

ipad 专业版和笔记本电脑的媒体查询

Media queries for ipad pro and laptops

css

ipad

ios

twitter-bootstrap