CSS自适应布局
2024-09-03 05:56:28
目标效果:
缩小浏览器之后
在<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
最新文章
- java 泛型的几点备忘
- linux下log4j乱码解决
- yum命令一些易遗忘的参数
- Metadata file not found - Data.Entity.Model
- iOS开发:使用Tab Bar切换视图
- Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)
- DWR3.0框架入门(2) —— DWR的服务器推送
- BZOJ2064: 分裂
- ASP.NET Core WebApi中简单像素转换跟踪实现
- SpringBoot整合Swagger测试api构建
- 在Python工作环境中安装包命令后加上国内源速度*15
- android 组件隐藏
- IDEA循环依赖报错解决方案
- 加载spring容器
- charCodeAt与fromCharCode
- [CF791D]Bear and Tree Jumps
- layui 日期插件onchange事件失效的方法
- day11:vcp考试
- 洛谷P5245 【模板】多项式快速幂
- linux学习笔记24---命令grep