CSS樣式編寫是網頁設計中必不可少的一部分，而響應式設計則是現代網站設計的重要趨勢，下面我們將討論如何使用CSS樣式編寫響應式設計。

首先，我們需要使用CSS3中的媒體查詢來實現響應式設計。媒體查詢是在CSS樣式表中使用的一個特殊語法，可以根據設備屏幕寬度來應用不同的CSS樣式。

@media screen and (max-width: 768px){
/*在屏幕寬度小于等于768像素時應用的CSS樣式*/
}

以上代碼表示：當屏幕寬度小于等于768像素時，將應用括號內的CSS樣式。

接下來，我們需要將CSS樣式分解為適用于不同設備的樣式組件，例如：<div class="container">元素的寬度不能為固定值，而應該根據設備屏幕寬度進行動態調整：

.container{
width: 90%; /*默認寬度90%*/
max-width: 1200px; /*最大寬度1200像素*/
margin: 0 auto; /*水平居中*/
}
@media screen and (max-width: 768px){
.container{
width: 100%; /*寬度撐滿*/
margin: 0; /*去除外邊距*/
}
}

以上代碼表示：當屏幕寬度小于等于768像素時，<div class="container">元素將被設置為寬度為100%，外邊距除去。

最后，我們需要使用Viewport meta標簽來確保網頁在移動設備上正確顯示。Viewport meta標簽告訴移動設備網頁的可視區域大小：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以上代碼表示：網頁可視區域的大小與設備屏幕大小相同，初始縮放比例為1.0。

總之，CSS樣式編寫響應式設計需要使用媒體查詢、適用于不同設備的樣式組件以及Viewport meta標簽等技術手段，并需要不斷的測試和優化，以確保網頁在各種設備上都能夠正確顯示。