在移動端頁面設計中，列表是常用的元素之一。在編寫移動端列表時，我們通常需要考慮列表的寬度、高度、文字大小等因素，以使列表在不同設備上都能呈現出良好的閱讀體驗。這里我們介紹一種按比例寫移動端列表的方法，幫助我們更輕松地創建出完美的列表布局。

ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 100%;
padding: 10px 0;
position: relative;
}
li::before {
content: "";
display: block;
padding-top: 75%; /* 圖片高度為列表項寬度的75% */
}
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
}
h3 {
font-size: 1.2rem;
margin: 10px 0 5px;
}
p {
font-size: 1rem;
color: #777;
margin: 0;
}

在上述代碼中，我們通過設置列表項的padding值來控制列表項的高度，從而實現列表項的等比例縮放。同時，我們在列表項前添加一個偽元素，用于撐開列表項的高度，并通過設置padding-top值來控制圖片的比例大小。

在圖片方面，我們將圖片寬度設置為100%，高度設置為auto，通過設置position:absolute、left:0和top:0，使圖片定位到列表項的左上角。同時，我們在圖片上設置了邊框圓角，增加了列表的美觀性。

對于列表項的標題和描述文字，我們設置了不同的字體大小和顏色，增加列表的整體層次感。

總體來說，按比例寫移動端列表是一種比較易于實現且效果良好的方法，可以適用于各種不同的移動端設備，提供了更好的用戶體驗。