完整移动端开发笔记，请戳https://github.com/zenglinan/Mobile-note
目录：
- viewport适配
- vw适配
- rem适配
- flex弹性盒
1. viewport适配
流程
- 按照设计稿上标注的尺寸进行开发
- 在页面刚开始渲染的时候设置meta，将渲染的页面的宽度设为设计稿的宽度
- 将页面整体缩放，缩放比例为当前屏幕的独立像素宽度/设计稿宽度
// 放在页面头部
<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>
优点：
方便开发，不用计算，一切元素的宽高按设计稿来即可
缺点：
边框等不需要缩放的元素，也会跟着缩放
2. vw适配
为了解决方案1(viewport适配)的缺点(无法对部分缩放，部分不缩放)，出现了vw适配
流程
- 将设计稿(假设750px)上需要适配的尺寸转换成vw，比如页面元素字体标注的大小是32px，换成vw为 32/(750/100) vw
- 对于需要等比缩放的元素，CSS使用转换后的单位
- 对于不需要缩放的元素，比如边框阴影，使用固定单位px
(1) viewport设置 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
把layout viewport 宽度设置为设备宽度，不需要缩放
(2) 用js定义css的自定义属性--width，表示每vw对应的像素数。
(3) 根据设计稿标注设置样式，比如标注稿里元素宽度为20px。这里设置 calc(20vw / var(--width))
// HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewport缩放实战</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750
document.documentElement.style.setProperty('--width', (WIDTH/100));
</script>
</head>
// CSS
header {
font-size: calc(28vw / var(--width));
}
优点
可以对需要缩放的元素进行缩放，保留不需缩放的元素
缺点
书写复杂，需要用calc计算
3. rem适配
为了改良vw适配书写复杂的缺点，出现了rem适配。
假设设计稿宽度为750px，手机端宽度为320px，上面字体标注为32px，则字体在手机端应该设为32 * (320/750) px。
将1rem设为 320/750，则字体大小可直接表示为32rem。
但是浏览器字体大小有限制，不能小于12px。故将html的font-size设为 (移动端设备宽度/设计稿宽度)x100
流程
- 拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
- 对设计稿的标注进行转换
- 对于需要等比缩放的元素，CSS使用转换后的单位
- 对于不需要缩放的元素，比如边框阴影，使用固定单位px
// HTML
<head>
<meta charset="utf-8">
<title> 动态rem缩放实战</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //设计稿尺寸
const setView = () => {
console.log(screen.width)
document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
</head>
// CSS
body{
font-size: .32rem; // 设计稿上宽度为32px
}
优点：书写简单可见
4. flex弹性盒
对于不需要缩放的元素，也可以采用flex布局延伸
eg.左边头像，右边文本，文本可以进行自适应。
网友评论