在不同尺寸的设备中实现自适应布局有很多种解决方法，这里给出一个使用CSS媒体查询的示例：

HTML代码：

    
    
    


    

        
Box 1
        
Box 2
        
Box 3
    

CSS代码（styles.css）：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box {
    width: 100%;
    margin-bottom: 10px;
}

/* 在小屏幕设备上，每行只显示一个box */
@media screen and (max-width: 600px) {
    .box {
        width: 100%;
    }
}

/* 在中等屏幕设备上，每行显示两个box */
@media screen and (min-width: 601px) and (max-width: 900px) {
    .box {
        width: 49%;
    }
}

/* 在大屏幕设备上，每行显示三个box */
@media screen and (min-width: 901px) {
    .box {
        width: 32%;
    }
}

上述示例中，使用了CSS的@media规则来根据不同的设备尺寸应用不同的样式。在小屏幕上，每行只显示一个box；在中等屏幕上，每行显示两个box；在大屏幕上，每行显示三个box。

通过这种方式，可以根据设备尺寸自动调整布局，以适应不同大小的屏幕。