viewport缩放方案
<!--当你收到750px的设计稿，却要适配逻辑像素宽度是428px的屏幕时候 你需要在head里添加-->
<meta name="viewport" content="width=750px, initial-scale=0.57" >
<!--<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}">-->
<!DOCTYPE html>
<html>
<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>
虽然原理有些复杂需要借助于JS,但px换算到CSS的rem计算简单，且方案灵活既能实现整体缩放又能实现局部不缩放。
vw
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--ratio: calc(100vw/750);
}
// 在中大型项目里，可以把换算交给scss
@function px2vw($px) {
@return $px * 100vw / 750;
}
.content {
width: 16vw; /* 直接使用：100vw*120/750 */
line-height: calc(100vw*48/750); /* 使用calc */
width: calc(120*var(--ratio)); /* 与变量结合使用 */
line-height: px2vw(48); /* scss */
}
</style>
</head>
<body>
<div class="content">内容</div>
</body>
</html>
虽不需要JS即可实现适配，但是px换到vw有些复杂，还好同样整体局部缩放自如可选！
尺有所短，寸有所长！三种方法我个人常用REM，但是适合项目但才是最好的，偷偷说一句REM与VW配合flex或Gird食用更香呦！
网友评论