Question

所有

我正在尝试开发一个响应式网站，但由于某种原因，我用于ipad /平板电脑的媒体查询也影响了iphone / mobile。我的尺寸错了吗？

定位所有三种设备类型的最佳方法是什么？

由于

/ 桌面 / @media（min-width：1100px）

/ ipad的 / @media screen和（max-width：1115px）

/ iphone / @media screen和（max-width：767px）

Answer 1

这是响应式设计中的常见问题，有许多方法试图解决它。我自己发现4断点布局是最适合大多数情况的。

电话：默认
手机横向：最小宽度480px;
平板电脑：最小宽度768px
平板电脑风景：最小宽度1024px
桌面最小宽度1260px

Answer 2

将min-width视为大于或等于，并将max-width视为小于或等于。

按照这种逻辑，你的iPad规则（小于或等于1115像素）也会影响iPhone，因为它的屏幕小于1115像素。

听起来您希望在ipad规则上使用AND，使其仅影响大于您的iphone规则集的规则。类似的东西：

@media screen and (max-width: 1115px) and (min-width: 768px)