回答
移動端適配是指在不同的移動設備上展示相同的頁面效果，以適應不同的屏幕分辨率和設備像素密度的要求。
常見的移動端適配方案有：
1.媒體查詢：使用css3的媒體查詢，根據不同屏幕寬度設置不同的樣式，實現響應式布局。
2.百分比布局：使用百分比單位設置元素的寬度和高度，以適應不同屏幕分辨率的要求。
3.rem布局：使用相對單位rem，根據根元素字體大小設置其他元素的大小，可以實現根據設備像素密度適配不同的屏幕分辨率。
4.viewport：通過viewport標簽設置設備的寬度和縮放比例，使網頁在不同設備上展示相同的效果。
5.Flex 布局。
6.使用適配庫 如amfe-flexible，postcss-pxtorem等。
7.設備檢測 Modernizr
簡單介紹
1.REM布局
REM 是 CSS3 中的一個相對單位，它相對于根元素（html）的字體大小進行計算。
通過改變根元素的字體大小，來改變其他元素的尺寸，以此來實現布局的自適應。
<html>
<head>
<style>
html {
font-size: calc(100vw / 10); /* 假設設計稿寬度為750px, 1rem = 75px */
}
div {
width: 1rem; /* div的寬度為75px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
如何動態改變根元素的字體大小呢？
其實是搭配媒體查詢來達到動態效果：
html {
font-size: 16px; /* 默認字體大小 */
}
/* 當視口寬度小于600px時，改變字體大小 */
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
/* 當視口寬度小于400px時，再次改變字體大小 */
@media (max-width: 400px) {
html {
font-size: 12px;
}
}
由于rem是相對于<html>元素的字體大小，所以當我們改變<html>元素的字體大小時，所有使用rem單位的元素的大小也會隨之改變。這使得我們可以根據視口的大小來調整頁面的布局和元素的大小。
2.什么是 Modernizr？
Modernizr是一個JAVAScript庫，它可以幫助你檢測用戶的瀏覽器是否支持你需要的HTML5和CSS3特性。
這樣你就可以根據這些檢測結果來決定你的代碼是否要使用某個特性，或者提供一個備選方案。
if (Modernizr.canvas) {
// 瀏覽器支持canvas
// 在canvas上畫圖
} else {
// 瀏覽器不支持canvas
// 提供一個備選方案
}
