[分享]css3改变屏幕大小

CSS3是一种用于描述网页样式的语言，可以对网页的布局、字体、颜色等有很好的掌控能力。其中，改变屏幕大小是CSS3中一个非常重要的功能，能够让页面在不同的设备上以最佳的展示效果呈现。在CSS3中，通过...

CSS3是一种用于描述网页样式的语言，可以对网页的布局、字体、颜色等有很好的掌控能力。其中，改变屏幕大小是CSS3中一个非常重要的功能，能够让页面在不同的设备上以最佳的展示效果呈现。

在CSS3中，通过使用@media规则来控制不同的屏幕尺寸下的样式。而且通过媒体查询（Media Query），可以检测用户使用的是何种设备和设备的屏幕宽度，从而针对不同场景设置网页的样式。

/* 定义一个@media规则 */
@media screen and (max-width: ***px) {
  /* 匹配屏幕宽度小于***px的情况下的样式 */
  body {
    background-color: lightblue;
  }
}

@media screen and (min-width: ***px) {
  /* 匹配屏幕宽度大于等于***px的情况下的样式 */
  body {
    background-color: lightgreen;
  }
} 

上述代码定义了两个@media规则，分别针对屏幕宽度小于***px和屏幕宽度大于等于***px两种情况下的样式。其中，screen表示针对屏幕设备进行匹配，后面的max-width和min-width表示匹配屏幕宽度的上限和下限。

通过使用CSS3来改变屏幕大小，可以实现针对不同屏幕尺寸设计不同的样式，这样用户在观看网页时就可以得到更好的用户体验。