移动端适配的目标是让页面在移动设备上可以合理展示
viewport缩放方案
在对设计稿还原时，不需要去关注移动设备的屏幕尺寸，页面开发好后，在HTML的head标签里加入 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >
本质上就是设置好布局视口宽度后再缩放页面，使其恰好能够撑满屏幕
<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>
优点是在开发过程中不需要去做额外的计算
动态rem
viewport是页面级（整体）缩放方案，动态rem是既可以保留一部分元素的尺寸，又可以根据屏幕缩放页面大小
对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位
如何做呢？
使用js设置html的font-size和页面宽度相同，而rem依赖于html的font-size，间接的让rem依赖于页面宽度
image.png
image.png
注意：字体还是使用字号，但是宽高使用动态rem（rem可以与其他单位同时存在）
image.png
在scss中rem2px
image.png
vw方案
一种不需要JavaScript的适配方案——vw适配方案
vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位
比如一个标题的font-size是32px，设计图页面尺寸为750px
(32/750)*100% = 4.27%，也就是说这个标题字号占屏幕宽度的4.27%，即可以写font-size: 4.27vw
scss中px2vw
@function px2vw($px) {
@return $px * 100vw / 750; // 设计图页面尺寸为750px
}
.button {
width: px2vw(120); // 设计图尺寸按钮宽度120px
font-size: px2vw(28);
line-height: px2vw(48);
border: 1px solid #000;
text-align: center;
}
