[分享]css兼容手机分辨率

在如今的移动互联网时代，越来越多的人喜欢用手机进行上网浏览。而随着手机多样化，各种分辨率层出不穷，如何使网页在不同分辨率下都能正常显示，是一个亟待解决的问题。而CSS的兼容性，尤其是对手机分辨率的兼容...

在如今的移动互联网时代，越来越多的人喜欢用手机进行上网浏览。而随着手机多样化，各种分辨率层出不穷，如何使网页在不同分辨率下都能正常显示，是一个亟待解决的问题。而CSS的兼容性，尤其是对手机分辨率的兼容性，就显得非常重要了。

CSS具有很好的可移植性，但是对于不同的屏幕分辨率，CSS文件往往需要做适当调整。首先，需要了解各类设备的分辨率，才能在CSS中进行相应的设置。

  /* iPhone4的屏幕分辨率为640*960 */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
    /* 填写相应的CSS */
  }

  /* iPad的屏幕分辨率为768*1024 */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
    /* 填写相应的CSS */
  }

  /* 屏幕分辨率大于1200px */
  @media only screen 
  and (min-device-width : 1200px) {
    /* 填写相应的CSS */
  } 

除了上述代码中提到的使用@media指令进行响应式布局外，我们还可以使用弹性布局（Flex）和流式布局（Fluid）等方式，来适配不同分辨率下的网页效果。

总的来说，兼容手机分辨率的CSS技术需要我们多样化运用，才能够在各类设备上获得最佳的视觉效果。而具体的实现方式则需要根据网页的结构和设计需求作出具体的调整。