完整移動端開發(fā)筆記，請戳https://github.com/zenglinan/Mobile-note
目錄：
- viewport適配
- vw適配
- rem適配
- flex彈性盒
1. viewport適配
流程
- 按照設(shè)計(jì)稿上標(biāo)注的尺寸進(jìn)行開發(fā)
- 在頁面剛開始渲染的時(shí)候設(shè)置meta外傅，將渲染的頁面的寬度設(shè)為設(shè)計(jì)稿的寬度
- 將頁面整體縮放乍丈，縮放比例為當(dāng)前屏幕的獨(dú)立像素寬度/設(shè)計(jì)稿寬度
// 放在頁面頭部
<script>
const WIDTH = 750 // 設(shè)計(jì)稿寬度
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 // 監(jiān)聽屏幕旋轉(zhuǎn)
</script>
優(yōu)點(diǎn)：
方便開發(fā)，不用計(jì)算混埠，一切元素的寬高按設(shè)計(jì)稿來即可
缺點(diǎn)：
邊框等不需要縮放的元素繁疤，也會跟著縮放
2. vw適配
為了解決方案1(viewport適配)的缺點(diǎn)(無法對部分縮放，部分不縮放)柒凉，出現(xiàn)了vw適配
流程
- 將設(shè)計(jì)稿(假設(shè)750px)上需要適配的尺寸轉(zhuǎn)換成vw，比如頁面元素字體標(biāo)注的大小是32px篓跛，換成vw為 32/(750/100) vw
- 對于需要等比縮放的元素膝捞，CSS使用轉(zhuǎn)換后的單位
- 對于不需要縮放的元素，比如邊框陰影愧沟，使用固定單位px
(1) viewport設(shè)置 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
把layout viewport 寬度設(shè)置為設(shè)備寬度蔬咬，不需要縮放
(2) 用js定義css的自定義屬性--width鲤遥，表示每vw對應(yīng)的像素?cái)?shù)。
(3) 根據(jù)設(shè)計(jì)稿標(biāo)注設(shè)置樣式林艘，比如標(biāo)注稿里元素寬度為20px盖奈。這里設(shè)置 calc(20vw / var(--width))
// HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewport縮放實(shí)戰(zhàn)</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));
}
優(yōu)點(diǎn)
可以對需要縮放的元素進(jìn)行縮放，保留不需縮放的元素
缺點(diǎn)
書寫復(fù)雜狐援，需要用calc計(jì)算
3. rem適配
為了改良vw適配書寫復(fù)雜的缺點(diǎn)钢坦，出現(xiàn)了rem適配。
假設(shè)設(shè)計(jì)稿寬度為750px啥酱，手機(jī)端寬度為320px爹凹，上面字體標(biāo)注為32px，則字體在手機(jī)端應(yīng)該設(shè)為32 * (320/750) px镶殷。
將1rem設(shè)為 320/750禾酱，則字體大小可直接表示為32rem。
但是瀏覽器字體大小有限制批钠，不能小于12px宇植。故將html的font-size設(shè)為 (移動端設(shè)備寬度/設(shè)計(jì)稿寬度)x100
流程
- 拿到設(shè)計(jì)稿（假設(shè)設(shè)計(jì)稿尺寸為750px，設(shè)計(jì)稿的元素標(biāo)是基于此寬度標(biāo)注）
- 對設(shè)計(jì)稿的標(biāo)注進(jìn)行轉(zhuǎn)換
- 對于需要等比縮放的元素埋心，CSS使用轉(zhuǎn)換后的單位
- 對于不需要縮放的元素，比如邊框陰影忙上，使用固定單位px
// HTML
<head>
<meta charset="utf-8">
<title> 動態(tài)rem縮放實(shí)戰(zhàn)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //設(shè)計(jì)稿尺寸
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; // 設(shè)計(jì)稿上寬度為32px
}
優(yōu)點(diǎn)：書寫簡單可見
4. flex彈性盒
對于不需要縮放的元素拷呆，也可以采用flex布局延伸
eg.左邊頭像，右邊文本疫粥，文本可以進(jìn)行自適應(yīng)茬斧。
