1、首先在vscode下载插件，px to rem 和 cssrem 其中一个都可以
2、在扩展那里Px-to-rem改为80，修改完重启vscode
3、在页面中引入flexible.js，需要进行修改
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 24 //这里默认是10等分的，手动改为24，这个时候1rem=1920px (设计稿的宽为1920px)/24px=80px (第二点的值的由来)
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
4、对应的less文件或者css文件，Ctrl+A选中全部，或者一个个选，默认快捷键是Alt+Z将px单位转换成rem（也可rem转换成px），如果不行，就检查一下自己的快捷键是不是冲突了
5、这里说一下个人踩坑经历，希望大家可以避坑。（如若说得不对，请指点）
- 能用flex布局就不用定位，定位坑太多，少用，不然后面屏幕适配的时候就得慢慢调了
- 每个内容都给宽高，因为rem是根据像素单位的改变来适配的，特别是图片，子元素width:100%,background-size: cover;不然rem没法识别到
- ! important 能不用就不用，毕竟是改变元素权重的，出了问题不好找
- 不写行内样式，项目内容多的话，引入自己的less或者css文件，统一进行修改
