CSS自适应布局
目标效果:
缩小浏览器之后
在<head>最前面引入flexible.js
<head> 。。。 <script type="text/javascript" src="./lib/flexible.js"></script> 。。 </head>
flexible.js 内容如下
(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size // console.log(dpr) 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))
然后根据当前浏览器宽度: 2048px = 10rem 推导出204.8px = 1rem 。对所有标签宽高,字体用到px的地方,换算成rem即可
> screen.width < 2048
👆根据你当前的浏览器宽度来换算
例如:
.div{ width:204.8px; height:204.8px; } 转算成 .div{ width:1rem; height:1rem; }
如果在蓝湖中不想算,那可以这样:
参考资料:http://caibaojian.com/simple-flexible.html
此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935.
我的gitHub: (学习代码都在gitHub)
https://github.com/nwgdegitHub/