最近在做網頁設計中，我們通常會需要針對不同設備的屏幕尺寸進行適配，讓網頁在不同尺寸的屏幕上都能夠正常地顯示。而其中一個難點就是如何實現圖片和文字的左右排版自適應。今天我們來介紹一下如何通過 CSS 來實現。

首先，我們來看一下需求和效果圖：

需求：當瀏覽器寬度大于 768px 時，圖片和文字左右排版，即圖片在左側，文字在右側，且圖片占 40%，文字占 60%。

@media screen and (min-width: 768px) {
.container {
display: flex;
}
.container img {
width: 40%;
}
.container p {
width: 60%;
margin-left: 20px;
}
}

以上 CSS 代碼中，我們使用了 CSS3 中的 flexbox。我們首先通過 @media 查詢實現了響應式布局，當瀏覽器寬度大于 768px 時，應用我們所定義的樣式。

其次，我們通過對最外層容器 .container 設置 display 為 flex，使得其內部的元素可以自動進行左右排版。

然后，我們設置圖片的寬度為 40%，文字的寬度為 60%。通過 margin-left: 20px，我們可以讓文本內容距離圖片有一定的間隔。

以上就是我們實現圖片和文字左右排版自適應的 CSS 代碼了。當瀏覽器寬度小于 768px 時，圖片和文字會自動進行垂直排版，因為此時我們沒有對 .container 設置 display: flex。

希望本文對你們有所幫助，謝謝閱讀。