CSS響應式設計是現代網頁設計重要的一部分，通過使用CSS媒體查詢來針對不同設備的不同視口大小，展現不同的樣式。下面是一個簡單的響應式設計的示例源代碼：

/*設備窗口寬度小于768px*/
@media (max-width: 767px) {
/*去掉頂部導航欄*/
.navbar {
display:none;
}
/*底部版權信息居中*/
.footer {
text-align:center;
}
/*移除側邊欄，并將主體內容撐滿全屏*/
.sidebar {
display:none;
}
.main {
width:100%;
}
}
/*設備窗口寬度大于768px*/
@media (min-width:768px) {
/*顯示頂部導航欄*/
.navbar {
display:block;
}
/*使側邊欄和主體內容并排*/
.sidebar {
float:left;
width:25%;
}
.main {
float:right;
width:75%;
}
}

上述代碼使用兩個@media查詢，分別針對設備寬度小于768px和大于768px兩種情況。在較小的視口上，代碼通過移除頂部導航欄和側邊欄，將主體內容撐滿全屏；在較大的視口上，代碼則將側邊欄和主體內容橫向排列。