移动端适配如何去做？

一丶移动端布局方案

1.1 什么是viewport

指的是移动设备浏览器中放置页面的一个虚拟的窗口，即用来显示网页的那一部分区域，相当于PC端浏览器可视区。

1.2 viewport的作用

在移动端开发中，常见视口抽象划分为布局视口，视觉视口，理想视口。

• 布局视口，移动设备默认的viewport即布局视口，宽度介于768-1024之间，不进行缩放的话，比浏览器窗口要大。
• 视觉视口，视觉视口是用户正在看到的网页区域，即屏幕宽度。
• 理想视口，布局视口对用户不友好，没有考虑到手机尺寸，所以苹果公司引入了理想视口概念。

1.3 如何去布局

1.3.1 宽度自适应布局(高度定值，宽度百分比)

缺点就是宽度拉伸缩放的时候图片会变形

1.3.2 rem适配

什么是rem，是指相对于根元素的字体大小的单位，即根据HTML素的font-size来计算大小。

步骤：

• 设置页面的viewport
• 动态计算并设置html的font-size的值
• 按照PC布局方式正常布局，把px换成rem

通过引入js代码实现动态的设置字体大小

<script>
let init = () => {
let width = document.documentElement.clientWidth;
document.documentElement.style.fontSize = width / 750 + 'px';
console.log(width);
}
//首次加载是计算
init();
//添加监听，窗口发生变化时计算
window.addEventListener('resize',init);
window.addEventListener('orientationchange',init);
</script>

在开发过程中，只需要将原来的单位直接改写成rem即可。数值不变

1.3.3 vw适配

即Viewport‘s width的简写，是C3规范中的视口单位，相对于视口宽度，视口被分为100单位的vw

例如一个750px的设计稿，对应了100vw。

直接将跟标签的font-size这是为0.1333333vw即可，在布局的时候仍然使用rem单位。
$$100vw=750px，0.1333vw=1px，13.33vw=100px$$