CSS移动端适配方案
移动端适配方案
1、viewport适配（全部等比缩放）
假设设计稿的宽高是 750*1334
根据设计稿标准（750px宽度开发页面），写完之后页面和元素自动缩小，适配375宽度的屏幕
head：
<meta name="viewport" content="width=750,initial-scale=0.5">
initial-scale = 屏幕的宽度 / 设计稿的宽度
为了适配其他屏幕，需要动态地设置initial-scale的值
const WIDTH = 750 // 设计稿的宽度
const mobileAdapter = () => {
let scale = screen.width / WIDTH // 求initial-scale的值
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
// 如果meta不存在，则创建一个meta
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content',content)
}
// 调用
mobileAdapter()
// 屏幕翻转时再次执行
window.onorientationchange = mobileAdapter
缺点就是边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好
2、vw适配（部分等比缩放）
假如设计稿的宽高是 750*1334
对设计稿的标注进行转换，把px转换成vw。比如说页面的元素字体的大小是32px，那换算成vw就是（100/750）*32
对于需要等比缩放的元素，CSS使用转换后的vw单位
对于不需要缩放的元素，比如说边框的阴影，则使用固定单位px
为了方便开发，利用自定义属性，CSS变量：
const WIDTH = 750
// 算出1像素等于多少vw，0.13333...
document.documentElement.style.setProperty('--width', (100 / WIDTH))
header {
font-size: calc(28vw * var(--width)); // 28像素的字体，根据屏幕宽度动态换算成vw
}
3、rem适配（部分等比缩放）
假设计稿的宽高是 750*1334
假设设计稿的某个字体大小是 40px, 手机屏幕上的字体大小应为 (420/750)*40 = 22.4px (体验好）。
换算成rem（假设html的font-size=100px），则这个字体的大小为22.4/100 = 0.224 rem
根据不同的屏幕宽度，设置html的font-size的值：
const WIDTH = 750 //设计稿尺寸
const setView = () => {
document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
对于需要等比缩放的元素，使用rem单位。
对于不需要等比缩放的元素，使用px固定单位。
使用sass库的时候：
JS 处理还是一样的。
@function px2rem($px) {
@return $px * 1rem / 100;
}
header {
font-size: px2rem(28);
}
4、弹性盒适配（合理布局）
以上三种适配方案，都是等比缩放，放到ipad上的时候，因为设计稿是以手机屏幕设计的，页面元素会很大很丑。
有些场景下，并不需要页面正题缩放，有时候只需要合理的布局就可以了。
<meta name="viewport" content="width=device-width">
然后使用flex布局
什么样的页面需要做适配（等比缩放）呢？
- 页面中的布局是栅格化的。
换了屏幕之后，到底有多宽有多高很难去做设置，整体都需要改变，所以需要整体的缩放。
- 头屏大图，宽度自适应，高度固定的话，对于不同的屏幕，形状就会发生改变（变形）。
- 宽度变化后，高度也要保持等比例变化。
以上所有的适配，都是宽度的适配，但是在某些场景下，也会出现高度的适配。
- 比如大屏幕，需要适配很多电视尺寸，要求撑满屏幕。
- 此时就需要考虑宽高都要vh去表示，中间的大块去自适应。
