环境:vue3+JS/TS+Vite
1、引入flexble.js文件
var Design_Width = 1920; var Design_Height = 1080; var REM = 16; var baseFontSize = 14; (function flexible(window, document) { // 获取的html 的根元素 var docEl = document.documentElement; // dpr 物理像素比; var dpr = window.devicePixelRatio || 1; // adjust body font size 设置我们body 的字体大小 function setBodyFontSize() { // 如果页面中有body 这个元素 就设置body的字体大小 if (document.body) { // document.body.style.fontSize = (REM * dpr) + 'px' document.body.style.fontSize = baseFontSize / REM + 'rem' } else { // 如果页面中没有body 这个元素,则等着 我们页面主要的DOM元素加载完毕再去设置body 的字体大小 document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 设置我们html 元素的文字大小 function setRemUnit() { var Width = (docEl.clientWidth / Design_Width) *REM; var Height = (docEl.clientHeight / Design_Height) * REM; var rem = Width > Height ? Width : Height; docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize 当我们页面尺寸大小发生变化的时候,要重新设置下rem 的大小 window.addEventListener('resize', setRemUnit) // pageshow 是我们重新加载页面触发的事件 window.addEventListener('pageshow', function(e) { // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem 的大小 if (e.persisted) { setRemUnit() } }) // detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法 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))View Code
具体参数可以根据自己页面要求改
2、使用rem
如果是用px写的,那么就在vscode下载一个插件——px to rem
下载后的具体配置可以百度一哈
一键转换px-->rem非常方便
3、隐藏滚动条
body::-webkit-scrollbar {display:none}
4、若要求鼠标滚动不滑动页面
body{overflow:hidden};
简单粗暴的页面就设置好啦!
标签:body,网页,滚动条,docEl,rem,var,document,隐藏,页面 From: https://www.cnblogs.com/LIXI-/p/17085072.html