css3适配手机屏幕

CSS3是当前最流行的网页样式表语言之一。然而，在移动设备上，尤其是手机屏幕上，使用CSS3样式表可能有很多问题，如元素溢出、无法使元素垂直居中等。以下是一些适配手机屏幕的CSS3实践方法。

@media only screen and (max-width: 480px) {
  /* 仅应用于小于等于480像素的屏幕，即移动设备上 */
  body {
    font-size: 16px;
  }
  /* 改变字体大小以适应屏幕宽度 */
  .container {
    width: 90%;
    margin: 0 auto;
  }
  /* 使元素宽度缩小并居中 */
  .logo {
    max-width: 100%;
    height: auto;
  }
  /* 确保图像大小不会超过父容器 */
  .menu {
    display: none;
  }
  /* 隐藏菜单以适应较小的屏幕空间 */
} 

上述实践方法可以通过在CSS样式表中使用@media查询来实现。@media查询用于针对不同的设备屏幕宽度应用不同的样式，以达到适应不同尺寸屏幕的目的。

实际上，还有更多的适配方法可以使用。例如，使用rem单位代替px单位以适应不同设备的屏幕密度。或者使用弹性布局（flexbox）让元素沿着你希望它们运动的轴线随屏幕大小而变化。总之，为了在手机屏幕上实现良好的用户体验，使用合适的适配方法非常重要。