css中宽高自适应

CSS中宽高自适应是Web开发中的常用技术之一。它可以使网页中的元素在不同屏幕分辨率和窗口大小下，自动调整大小和位置，从而保证网页的美观度和可读性。

实现宽高自适应的方法有很多，下面我们分别介绍一些最常用的方法。

/* 第一种方法：使用百分比 */
.box {
    width: 50%; /* 宽度占父元素50% */
    height: 50%; /* 高度占父元素50% */
}

/* 第二种方法：使用vw和vh单位 */
.box {
    width: 50vw; /* 宽度占浏览器窗口宽度50% */
    height: 50vh; /* 高度占浏览器窗口高度50% */
}

/* 第三种方法：使用flex布局 */
.box {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 第四种方法：使用grid布局 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 列数随窗口大小而变化 */
    grid-gap: 20px; /* 两个元素的间隔 */
} 

以上就是几种常用的宽高自适应方法，可以根据项目需要选择适合的方式，达到更好的用户体验和效果。