[分享]css3怎么调节屏幕大小

使用CSS3能很方便的调节屏幕大小，有以下几种方法：

/* 方法1：使用vw和vh */
div {
   width: 50vw; /* 宽度为视窗宽度的50% */
   height: 80vh; /* 高度为视窗高度的80% */
}

/* 方法2：使用媒体查询 */
@media only screen and (max-width: 768px) {
   div {
      width: 100%; /* 在宽度小于768px的屏幕上，宽度设置为100% */
   }
}

/* 方法3：使用flex布局 */
.container {
   display: flex;
   flex-wrap: wrap;
}

.container > div {
   flex: 1 0 25%; /* 一行最多显示4个盒子 */
}

/* 方法4：使用网格布局 */
.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr); /* 在每行上显示4个盒子 */
}

.container > div {
   grid-column: span 1; /* 每个盒子横跨1个网格 */
} 

这些方法可以很好的适应不同大小的屏幕，使网页在不同设备上都能获得最佳表现。