移动端适配方案

一、定义

• 1. 移动端适配是指同一个页面可以在不同的移动设备上都有合理的布局。
• 2. 主流的方案有两种：响应式布局@media媒体查询 与 rem等比缩放

二、布局方案详情

• 1. 响应式布局，通过@media媒体监听实现一套html配合多套CSS实现适配
• 2. 通过rem等比缩放或者vw、vh等实现不同的设备有相同样式进行适配，配合JS根据设备宽度计算html的fon-size
• 3.有时也可以采用rem和媒体查询;

三、先导概念----viewport视口

• 如果要实现移动端适配首先要有统一的标准视口

四、rem实现原理

rem是一个倍数单位，它是基于html的html的font-size的倍数。只要我们在不同设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比例适配大小，从而在不同设备上表现。

五、媒体监听

• 媒体监听通过@media。注意：媒体监听不是等比缩放，是同一块内容在不同设备上有合理的表现;
• 例如：在pc端上一行能同时显示4个元素块，而在移动端只能一行展示1个或者2个元素块(要不看不清) 那么可以通过监听媒体宽度，给元素设置不同的宽度，从而有合理的表现;
• 媒体查询适配移动端方案也要先统一viewport。