css适配方案总结
- vw 适配 直接 宽度/设计稿宽度(假设750px)*100vw=xvw 可以用vscode插件,也可以用scss 内置的预处理
@function px2vw($px) {
@return $px * 100vw / 750;
}
.button {
width: px2vw(120);
font-size: px2vw(28);
line-height: px2vw(48);
border: 1px solid #000;
text-align: center;
}
- viewport 通过 js控制viewport的缩放比例 缺点就是细节上无法处理。
<head>
<meta charset="utf-8">
<script>
const WIDTH = 750
const mobileAdapter = () => {
let scale = screen.width/WIDTH
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
if(!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content', content)
}
mobileAdapter()
window.onorientationchange = mobileAdapter
</script>
</head>
<body>
...
</body>
</html>
- rem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //如果是尺寸的设计稿在这里修改
const setView = () => {
//设置html标签的fontSize
document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
<style>
div {
width: 3.75rem; /* 需要随屏幕等比缩放,使用rem单位,比如设计稿中标注的32px这里写成0.32rem */
border: 1px solid #ccc; /*不需要缩放的部分用px*/
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>