应式卡片式布局，首先需要使用CSS中的 媒体查询（Media Query）来根据设备不同的宽度和高度，调整元素的样式。接着，可以使用CSS中的网格布局（Grid Layout）或弹性盒子布局（Flexbox）来放置卡片。
例如，可以使用 @media rule 和 min-width media feature 来在不同屏幕尺寸下应用不同的CSS规则，例如：
@media only screen and (min-width: 768px) {
/* 在宽度大于等于768px时应用样式 */
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
}
@media only screen and (max-width: 767px) {
/* 在宽度小于768px时应用样式 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}以上代码定义了两个媒体查询，分别在不同的屏幕宽度下应用不同的CSS规则。在这个例子中，当屏幕宽度大于等于768像素时，卡片会被放置在一个3列的网格中，每个卡片之间有20像素的间隙；当屏幕宽度小于768像素时，卡片会同时显示在同一行，并且居中对齐。
另外，在编写卡片的CSS样式时，可以使用 max-width 和 min-width 属性来控制卡片的宽度。这样可以确保卡片在不同大小屏幕上显示得更加一致。
最后，需要注意的是，要实现响应式设计，必须经常测试应用程序以确保其在各种设备和浏览器上都能正确地工作。