css 跟随屏幕大小变动

在网页设计中，我们常常需要让元素随着屏幕大小的变化而自适应。这样可以让网页在不同尺寸的设备上显示得更加美观和合理。CSS提供了很多的技巧来实现这一目的。

第一种方法是使用百分比来设置元素的大小。比如，可以将容器宽度设置为100%，这样容器就会随着屏幕大小的变化而自适应。同时，也可以使用百分比来设置字体大小、内外边距等属性，使它们不会因为屏幕大小的变化而失去平衡。

.container {
width: 100%;
font-size: 1.2em;
padding: 2% 5%;
}

第二种方法是使用CSS3新增的单位vw（viewport width）和vh（viewport height）。这两种单位可以根据屏幕的宽度和高度来自动调整元素的大小。比如，将元素宽度设置为50vw，表示元素的宽度为屏幕宽度的50%。

.box {
width: 50vw;
height: 40vh;
}

第三种方法是使用@media查询来设置不同屏幕尺寸下的情况。比如，在移动设备上，可以将字体大小设置为更小的值，以适应较小的屏幕。同时，可以使用媒体查询来设置元素的显示和隐藏，也可以使用flexbox布局来实现更好的布局效果。

@media screen and (max-width: 768px) {
.box {
font-size: 0.8em;
display: block;
}
.container {
display: flex;
flex-direction: column;
}
}

CSS提供了很多可以让元素随屏幕大小变化的技巧，我们可以根据具体情况来选择合适的方法。这样可以让网页在不同设备上都能够呈现出最佳的效果。