在过去，开发人员需要通过指定固定的宽度和高度来确保元素正确地渲染。然而，这样的方法存在一定的缺陷，尤其是当网站被展示在不同的屏幕上时。
.container {
width: 960px;
height: 600px;
}在上面的例子中，大家可以看到容器的宽度和高度都被指定为固定值。但是，如果该元素被放置在一个小屏幕上，它会过大而碾压页面，影响用户的体验。
为了解决这个问题，CSS 提供了许多方法来适应不同屏幕的大小。下面是一些可用的技术：
1. 媒体查询（Media Queries）
/* 在不同屏幕上使用不同的样式 */
@media only screen and (max-width: 600px) {
.container {
width: 100%;
height: auto;
}
}通过使用媒体查询，大家可以针对不同的屏幕大小使用不同的 CSS 样式。在上面的代码中，容器将在屏幕宽度小于或等于 600 像素时，自动调整为 100% 宽度和自适应的高度。
2. 相对单位（Relative Units）
/* 在不同屏幕上使用相对单位 */
.container {
width: 80%;
height: 50%;
}使用相对单位，如百分比和视窗单位，可以让布局更具适应性。上面的代码将容器的宽度和高度设为视口宽度和高度的 80% 和 50%。
3. 弹性盒子布局（Flexbox Layout）
/* 使用弹性盒子布局适应屏幕大小 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}弹性盒子布局是一种强大的布局技术，可以让元素具有更高的灵活性。在上面的代码中，容器使用弹性盒子布局，横向排列，且元素之间均匀分布。
总的来说， CSS 提供了很多方法来使网站布局适应不同的屏幕大小。开发人员可以根据实际需求选择适合自己的方法，使网站看起来更加美观和易用。