屏幕宽度不同对于CSS4的影响

@media screen and (min-width: 1200px) {
/* 样式代码放在这里 */
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
/* 样式代码放在这里 */
}
@media screen and (min-width: 768px) and (max-width: 991px) {
/* 样式代码放在这里 */
}
@media screen and (max-width: 767px) {
/* 样式代码放在这里 */
}

CSS在不同屏幕宽度下的呈现效果不同。为了解决这个问题，CSS4 提出了响应式设计，即媒体查询（media query）。媒体查询是一种能够根据用户设备的属性来改变 CSS 样式表的普通 CSS 规则。

以上代码展示了四个不同屏幕宽度下的媒体查询。当屏幕宽度大于等于 1200px 时，应用该段样式代码；当屏幕宽度在 992px ~ 1199px 之间时，应用另一段样式代码；当屏幕宽度在 768px ~ 991px 之间时，应用再另一段样式代码；当屏幕宽度小于等于 767px 时，应用最后一段样式代码。在不同的媒体查询里，样式代码也可以实现不同的设计效果，使得网页能够适应不同设备的屏幕大小。

总而言之，CSS4 的媒体查询是一种非常实用的技术，能够让网页在不同设备上展示出最佳的效果。通过使用媒体查询，我们可以让网页适配不同的终端设备，使用户能够在各种设备上获得流畅的体验。