[分享]css兼容i7用没效果

最近在写一个网站页面，开发过程中遇到了一个很郁闷的问题——CSS在i7上没生效。页面在其他设备上运行都很正常，但在i7上就是无论怎么调整CSS都没法生效。在检查过代码、排除其他原因后，我开始深入研究可...

最近在写一个网站页面，开发过程中遇到了一个很郁闷的问题——CSS在i7上没生效。页面在其他设备上运行都很正常，但在i7上就是无论怎么调整CSS都没法生效。在检查过代码、排除其他原因后，我开始深入研究可能原因。

@media only screen and (min-width:1200px) {
  .container {
    width: 1170px;
    margin: 0 auto;
  }
}

@media only screen and (min-width:768px) and (max-width:992px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
} 

我发现问题出在了media queries上。由于i7分辨率较高，导致它会视口宽度实际上比标准的分辨率更宽，从而导致CSS判断出错。在调整media queries后，问题就得以解决。

总结来说，要保证CSS在i7上的兼容性，除了要注意viewport的设置，还要特别留意各类媒体查询（特别是响应式设计中的media queries），以确保样式在i7上的正确应用。