沧州网站,网站开发众包,网站开发创建画布,哔哩网站开发需求分析模板!-- 默认html的font-size的大小是16px 1rem 16px -- !-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候#xff0c; html的font-size将会跟着发生改变 -- !-- 实现的步骤如下 -- !-- 1 借助flexble.js文件 -- !-- 2 将fle… !-- 默认html的font-size的大小是16px 1rem 16px -- !-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候 html的font-size将会跟着发生改变 -- !-- 实现的步骤如下 -- !-- 1 借助flexble.js文件 -- !-- 2 将flexble.js文件中的屏幕适配分为24份。 那么随着屏幕不断发生变化的时候 屏幕的fonst-size的大小就是当前屏幕的尺寸/24了 -- !-- 3 屏幕适配 当设计稿为1920的时候而我的屏幕是1240 而设计稿的盒子尺寸是500的时候那么我的盒子尺寸应该(500/1920)*1240 基于这样的运算会比较复杂 -- !-- 4 下载插件帮助计算 pxtorem; -- !-- 5 因为我们量尺寸都是基于设计稿去量的 所有我们要将pxtorem的尺寸进行修改 在设置里面找到修改尺寸的地方也就设计稿的尺寸1920/24 80 -- !-- 6 这样我们就可以基于原设计稿的尺寸来进行测量而在我们这里转化为rem就可以了 --
(function flexible(window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize 12 * dpr px} else {document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize()// set 1rem viewWidth / 10// pc端屏幕适配 一般将flexble分为24份// 默认情况下是将屏幕大小分为了100份// 原理 不管屏幕是多大 反正默认指定的分数function setRemUnit() {// 这里默认是10等份手动改为24此时1rem1920/24px即80px。设计稿是1920px的var rem docEl.clientWidth / 24docEl.style.fontSize rem px}setRemUnit()// reset rem unit on page resizewindow.addEventListener(resize, setRemUnit)window.addEventListener(pageshow, function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody)}
})(window, document)
