在移動設備越來越普及的今天，CSS移動端布局知識變得越來越重要。在移動設備上，屏幕比較小，需要通過合理的布局來達到更好的用戶體驗。

/* meta標簽 *//* 清除默認樣式 */
* {
margin: 0;
padding: 0;
}
/* 文本占據一行 */
body {
white-space: nowrap;
}
/* 設置基準字體大小，一般為16px */
html {
font-size: 16px;
}
/* 將px轉換為rem */
@media screen and (max-width: 375px) {
html {
font-size: 14px;
}
}
/* 設置塊級元素寬度為屏幕寬度 */
.container {
width: 100%;
}
/* 設置元素垂直水平居中 */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 設置圖片寬高比 */
.img-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.img-wrapper img.landscape {
height: 100%;
}
/* 獲取設備dpr，根據不同的dpr加載不同清晰度的圖片，提高加載速度 */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
.img-wrapper img {
content: url("xxx@2x.jpg");
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {
.img-wrapper img {
content: url("xxx@3x.jpg");
}
}

常用的移動端布局方式有響應式布局、彈性布局、流式布局和柵格布局。在實際開發中，我們需要根據實際情況選擇適合的布局方式，并結合CSS3的特性來進行實現。

總之，CSS移動端布局知識是移動端開發中必不可少的一部分，掌握好這些知識可以讓我們輕松地開發出優秀的移動端應用。