如今，移動設(shè)備已經(jīng)成為人們生活中不可或缺的一部分，而為了更好地適應(yīng)移動設(shè)備的使用，為網(wǎng)站添加響應(yīng)式設(shè)計成為了必然趨勢。而CSS作為前端開發(fā)中的重要一環(huán)，也有著舉足輕重的地位，今天我們就來學(xué)習(xí)一下如何使用CSS畫一個手機框架。

首先，我們需要準備的就是一張模擬手機屏幕的圖片，然后使用CSS將它制作成一個框架，使我們的網(wǎng)頁可以更好地適應(yīng)各種屏幕大小。下面就是我們需要用到的CSS代碼，我們需要在頭部的樣式表中添加一下代碼。

.phone {
border: 5px solid #333;
width: 360px;
height: 640px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 60px;
}
.screen {
background: white;
width: 320px;
height: 520px;
position: absolute;
left: 20px;
top: 60px;
overflow: auto;
}

上述代碼中的"phone"類是手機邊框的樣式定義，包括了手機框架的邊框粗細，尺寸大小，邊距和圓角等。而"screen"類是屏幕的樣式定義，包括屏幕的背景顏色，尺寸大小，定位以及是否添加滾動條等。

在HTML頁面中，我們只需要添加一個div元素，并將其設(shè)置為以上所定義的"phone"類即可。而屏幕中的內(nèi)容則需要根據(jù)實際需求進行添加。

<div class="phone">
<div class="screen">
<!--在這里添加你的內(nèi)容-->
</div>
</div>

使用以上代碼，我們所畫出來的手機框架就是這樣的：

這里是屏幕中的文字內(nèi)容

最后，我們需要注意的是，在實際開發(fā)過程中，我們還需要根據(jù)實際情況添加不同尺寸的手機框架，以及不同屏幕方向的樣式定義，進一步適應(yīng)不同的設(shè)備和不同的需求。