flexible.js配合vscod插件
cssrem
flexible.js作用就是把屏幕分成等份,比如1920/24=80,然后做rem就可以让根字大小为80px,就是1rem等于80px。
(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 / 103
// 把屏幕平均分成10等份。比如1920/10= 192 px,这个时候1rem就是192px,配合vscod插件快速适配,在style中使用媒体查询。
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))
把屏幕平均分成10等份。比如1920/10= 192
px,这个时候1rem就是192px,配合vscod插件cssrem
快速适配,在style中使用媒体查询。
在插件扩展设置中,把基准改为每一份的值,这里比如:1920/24 = 80,也就是把等分为24份,80px就是1rem。
我们在适配的时候。比如要让屏幕在1024时候就停止适配,到1920以上也停止适配,那么可以使用媒体查询来设置,
代码如下:
/* // 实现rem适配 */
// 42.66px是用1024/24得来的
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
// rem就是依据字体来适配的,所以只要把根字大小固定了,就可以实现停止适配了。
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
下面是flexible.js中改变分成几份的地方:
function setRemUnit() {
var rem = docEl.clientWidth / 24 // 这里是分成了24份
docEl.style.fontSize = rem + 'px'
}
✨个人笔记博客✨
星月前端博客
http://blog.yhxweb.top/
✨原创不易,还希望各位大佬支持一下
点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!