rem移动端适配

vscode 基本配置和使用
https://www.cnblogs.com/jcuan/p/5918088.html

html
开头输入！然后按tab，整个html框架补全
输入标签名称然后tab，补全标签

css可以使用cssrem px->rem 转化
扩展cssrem F1 + cssrem

移动端适配问题
一般的ui图都会按照375去做，那么我们可以现在vscode上设置rootsize;
引入remchange.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 / 10
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))
然后设置cssrem vscode 在设置打开setting ,rootsize改为37.5px;
之后再页面上再去写就可以直接
width:375px;height:375px;font-size:16px;
会自动转化为rem width:10rem;
这样就是相当于百分比的100%，在任何设备上都会是100%；
这样就是很方便的不用每次都算来算去啦！
可能没有很多什么理论详情讲解
附一篇优秀的讲解:https://www.cnblogs.com/well-nice/p/5509589.html
github:https://github.com/amfe/lib-flexible