j移動端適配是指在不同尺寸的手機設備上，頁面能相對達到合理的展示（響應式）或者保持統一效果的等比縮放（看起來差不多）。

<dd id='knhbu'></dd>

1、硬件概念

屏幕尺寸 

屏幕分辨率（物理分辨率、設備分辨率）

設備像素（物理像素）

像素密度（Pixels Per Inch）

2、適配的幾種可行方案

媒體查詢

通過 CSS 的 @media 媒體查詢設置不同的 style。通過媒體查詢，我們可以根據不同屏幕設置不同樣式，這樣就可以實現不同屏幕的適配。
link 元素中的 CSS 媒體查詢，不同屏幕加載不同樣式文件：

<link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 980px)" href="pc.css" />

動態 rem 方案

這種是在開發中常用的方案。

采用 rem 為單位設置元素大小。對于不同屏幕，我們只需要動態修改根元素字體大小，元素大小就會同比例改變，從而做到頁面的自動適配效果。例如，假設設計稿寬度為 750px，元素A寬度為 300px，在屏幕寬度為 375pt 的屏幕中，設置根元素字體大小為 37.5px，則元素A寬度為 4rem；在屏幕寬度為 750pt 的屏幕中，只需將根元素字體大小改為 75px，不需要改變元素A的大小，就可以做到頁面適配。

在上述方案中，j

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}