CSS中的列表元素可以使用按比例的方式進行設計，這一方法十分便捷并且適用于不同屏幕尺寸的排版。關鍵在于使用百分比的縮放值，這能夠根據屏幕尺寸自動調整大小，保證頁面的美觀度與使用性。

ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
 }
li {
width: 33%;
padding: 10px;
box-sizing: border-box;
float: left;
 }
@media (max-width: 768px) {
li {
width: 50%;
}
 }
@media (max-width: 480px) {
li {
width: 100%;
}
 }

以上代碼中，我們使用了兩種單位：百分比和像素。列表的寬度被設置為100%，因此會自動適應頁面寬度，而每個列表項的寬度都被設置成33%。這一比例適用于大屏幕設備。但是，當屏幕寬度縮小到768px以下時，每個列表項的寬度變為50%，在480px以下情況下就變成了100%。

列表項的padding和box-sizing屬性的設置是為了使內容區域保持一致，且不會超出列表項邊界。float:left屬性確保每個列表項都在同一行上。

總的來說，按比例設計列表可以使得頁面在不同屏幕尺寸下都擁有美觀的外觀和良好的用戶體驗。