適配問題整理：
一难审、響應(yīng)式：
1.移動端需要設(shè)置meta標(biāo)簽
`<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">`
其中：
①斥滤、width=device-width：是設(shè)置可視區(qū)寬度等于設(shè)備寬度
②胚嘲、initial-scale=1.0：初始化縮放比例
③椎工、maximum-scale=1.0：最大可以放大的比例
④冒冬、minimum-scale=1.0：最小可以縮小的比例
⑤伴逸、user-scalable = 0： 是否允許用戶縮放（1為true,0為false）
> 原文鏈接：本文為CSDN博主「汪小穆」的原創(chuàng)文章https://blog.csdn.net/w390058785/article/details/80223717
```css
html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用寬度*/
@media(max-width:480px){ html { font-size:75px; } } /*Android常用寬度*/
@media(max-width:414px){ html { font-size:64.69px; } }? /*i6Plus,i7Plus寬度*/?
@media(max-width:375px){ html { font-size:58.59px; } } /*i6,i7寬度*/
@media(max-width:360px){ html { font-size:56.25px; } } /*Android常用寬度*/
@media(max-width:320px){ html { font-size:50px; } } /*i5寬度*/
```
3缠沈、750的設(shè)計稿
```css
html { font-size:100px; font-family:'微軟雅黑','蘋方','思源黑體';? }? /*效果圖750px*/
? ? ? ? @media(max-width:640px){ html { font-size:85.33px; } }? /*Android常用寬度*/
? ? ? ? @media(max-width:540px){ html { font-size:72px; } }? ? /*Android常用寬度*/
? ? ? ? @media(max-width:480px){ html { font-size:64px; } }? ? /*Android常用寬度*/
? ? ? ? @media(max-width:445px){ html { font-size:60px; } }
? ? ? ? @media(max-width:414px){ html { font-size:55.2px; } }? /*i6Plus,i7Plus寬度*/
? ? ? ? @media(max-width:375px){ html { font-size:50px; } }? ? /*i6,i7寬度*/
? ? ? ? @media(max-width:360px){ html { font-size:48px; } }? ? /*Android常用寬度*/
? ? ? ? @media(max-width:320px){ html { font-size:42.67px; } }? ? /*i5寬度*/
```
二、用js去修改
```javascript
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
? ? ? ? remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
? ? ? ? //console.log("rem font-size:", rem)
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem错蝴，不然 refreshRem 會執(zhí)行2次洲愤；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執(zhí)行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器后退的時候重新計算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function() {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 1024);
```
三、也可以
1顷锰、先在開頭：
```javascript
document.documentElement.style.fantSize=document.documentElement.clientWidth/100+'px'
```
2柬赐、利用less
```css
w（@px）{
width：unit（@px/37.5,rem）
}
```
