[分享]css3屏幕自适应宽度

CSS3的屏幕自适应宽度功能可以让网页根据用户所使用的设备自动调整布局和大小，使得网页能够在不同设备上得到更好的显示效果。实现这个功能需要用到CSS3的媒体查询（media queries）和百分比布...

CSS3的屏幕自适应宽度功能可以让网页根据用户所使用的设备自动调整布局和大小，使得网页能够在不同设备上得到更好的显示效果。

实现这个功能需要用到CSS3的媒体查询（media queries）和百分比布局。通过媒体查询，可以针对不同的设备尺寸来应用不同的样式。而通过百分比布局，则可以让网页的宽度和高度随着设备尺寸的变化而自动调整。

@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于等于768px时应用的样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  /* 当屏幕宽度在769px到992px之间时应用的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 993px) {
  /* 当屏幕宽度大于等于993px时应用的样式 */
  body {
    font-size: 18px;
  }
}

.container {
  width: 90%;
  margin: 0 auto;
}

.box {
  width: 45%;
  height: 200px;
  display: inline-block;
} 

在上面的代码中，我们定义了三个媒体查询，分别对应屏幕宽度小于等于768px、屏幕宽度在769px到992px之间和屏幕宽度大于等于993px的情况。每个媒体查询中定义了不同的字体大小，以适应不同尺寸的设备。

同时，我们还定义了一个容器元素和一个盒子元素，它们的宽度都是用百分比表示的。这样，在不同的设备上，它们的大小都会随着屏幕尺寸的变化而自动调整。

通过CSS3的屏幕自适应宽度功能，我们可以让网页在不同设备上都能够得到良好的显示效果，提高用户体验和网站的可访问性。