适配问题整理：
一、响应式：
1.移动端需要设置meta标签
``
其中：
①、width=device-width：是设置可视区宽度等于设备宽度
②、initial-scale=1.0：初始化缩放比例
③、maximum-scale=1.0：最大可以放大的比例
④、minimum-scale=1.0：最小可以缩小的比例
⑤、user-scalable = 0： 是否允许用户缩放（1为true,0为false）
> 原文链接：本文为CSDN博主「汪小穆」的原创文章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的设计稿
```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 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
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）
}
```