html 原生项目屏幕适配(rem, flexible.js)
参考地址: https://www.cnblogs.com/chenxi188/p/13900406.html
1. 将flexible.js 导入/js/flexible.js
下载地址: https://github.com/amfe/lib-flexible
- flexible.js
(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 / 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))
2. 引入flexible.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入我们的flexible.js 文件 -->
<script src="js/flexible.js"></script>
</head>
3. vscode安装插件
px to rem
或 cssrem
都可以
4. 配置vscode
在vscode设置中搜px-to-rem
, 找到配置项Number of pixels per 1rem.
,
设置的值为: 设计稿宽度 / 10, 如: 设计稿的宽度是1920, 就设置为 192
重启vscode
5. 转换px为rem
项目中不要写行内样式!
在.css文件中,全选, 然后Alt+Z
, 转换为rem单位
.index {
height: 1080px;
width: 1920px;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
.index {
height: 5.625rem;
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}