如今，移動(dòng)互聯(lián)網(wǎng)已經(jīng)深入人心，在這個(gè)全民移動(dòng)社交的時(shí)代，各種不同規(guī)格的移動(dòng)設(shè)備已經(jīng)成為人們生活中必不可少的存在。當(dāng)人們使用這些設(shè)備來訪問網(wǎng)站或者是使用各種應(yīng)用時(shí)，網(wǎng)站或應(yīng)用的界面是否可以自動(dòng)適應(yīng)不同設(shè)備的屏幕尺寸就顯得尤為重要了。

網(wǎng)頁設(shè)計(jì)師們要想讓網(wǎng)站在不同尺寸的設(shè)備上都能夠呈現(xiàn)完美的用戶體驗(yàn)，就需要深入了解HTML和CSS屏幕適配這一難題。

HTML中最常用的單位是像素（px），像素是固定不變的，而不是根據(jù)屏幕尺寸來變化的，所以如果網(wǎng)頁使用大量的像素作為單位，那么在不同設(shè)備上看到的網(wǎng)頁布局大小也是固定的，這時(shí)就需要使用CSS的相對(duì)單位來進(jìn)行適配。

CSS中一些適配手機(jī)屏幕的單位有：

em：相對(duì)于父元素字體大小的單位。
rem：相對(duì)于根元素字體大小的單位。
vh和vw：寬度和高度相對(duì)于視口的百分比單位。
%

通過使用相對(duì)單位，進(jìn)行分辨率自適應(yīng)的布局，可以讓網(wǎng)站在不同分辨率的設(shè)備上都得到良好展示。

CSS中通過媒體查詢（Media Query）來實(shí)現(xiàn)響應(yīng)式布局。媒體查詢可以定義不同屏幕分辨率下需要展示的CSS樣式。使用@media規(guī)則，可以設(shè)置不同設(shè)備大小，以及不同模式下應(yīng)用的CSS樣式。

@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}

上面的代碼段表示在屏幕寬度不小于768px時(shí)，body字體大小為18px。

通過使用HTML和CSS進(jìn)行屏幕適配，不同尺寸的設(shè)備訪問網(wǎng)站時(shí)體驗(yàn)一樣，這也是現(xiàn)代網(wǎng)站設(shè)計(jì)中必須掌握的一項(xiàng)技能。