css不同分辨率兼容性

在网页开发中，我们常常会遇到这样一个问题：同一份CSS样式，在不同的分辨率下展示出来的效果可能会不一样。这是因为不同的设备分辨率导致了CSS样式的兼容性问题。

 body{
        font-size: 16px;
    }

    @media screen and (max-width: 768px){
        body{
            font-size: 14px;
        }
    }

    @media screen and (max-width: 480px){
        body{
            font-size: 12px;
        }
    }

如上所示的CSS代码是一个简单的响应式设计样式，它的作用是在不同的设备分辨率下自动适应字体大小。在设备屏幕宽度小于768px时，字体大小会适当减小。在屏幕宽度小于480px时，字体大小会再次减小。

但是，这个看似简单的CSS代码在不同的浏览器和设备上的兼容性可能会有差异。比如，在某些安卓手机上，该CSS样式可能不起作用，而在其他设备上则正常。

要充分考虑到CSS在不同分辨率下的兼容性问题，我们可以采用以下方法来解决：

• 先测试样式在不同设备上是否可以正常显示。
• 尽量避免使用低版本浏览器不支持的CSS3属性。
• 使用合适的CSS Reset库来规避浏览器间的差异。
• 慎重使用CSS Hack。

总之，为了保证CSS在不同设备上的兼容性，我们需要不断地学习掌握各种方法和技巧，以确保我们的网页在任何设备上都能够良好地展示。