在網頁設計過程中，我們常常遇到需要適配不同設備分辨率的情況。而其中的一個重要概念就是“像素”。

在PC端，通常1個像素就對應屏幕上的1個物理像素。但對于移動設備來說情況卻有些不同。由于移動設備的屏幕尺寸較小，單純地將網頁縮小并不利于用戶體驗。因此，移動設備引入了另外一個概念——CSS像素。

CSS像素也叫邏輯像素，是一種虛擬單位，通常用于描述網頁中的布局和設計。CSS像素與物理像素之間的轉換關系依賴于設備的像素密度（即DPI）。例如，蘋果iPhone 6的屏幕尺寸為4.7英寸，分辨率為750x1334像素。這意味著它的像素密度為326ppi（1英寸內的像素數），那么在iPhone 6上，1個CSS像素就等于2個物理像素。

例如：
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 6/7/8  */
body {
font-size: 16px;
}
}

在上述代碼中，我們使用@media媒體查詢來針對iPhone 6/7/8進行CSS樣式的設置。其中，我們在條件中指定了設備的屏幕尺寸和像素密度。接著，在樣式中，我們針對整個元素設置了字體大小為16px。由于iPhone 6/7/8的像素密度為2，因此這里的16px實際上被轉換為32物理像素。

當然，對于每種設備的像素密度，我們也可以使用@media媒體查詢針對不同的屏幕尺寸設置不同的CSS樣式來適配移動設備。