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