JS+rem实现移动端自适应

首先了解到什么是自适应？
自适应就是页面元素宽高随着窗口大小改变而变化，自动适应不同大小的设备。
再来看到rem适配原理：
先了解到什么是rem？
rem是相对长度单位，相对于html下的font-size的单位，一般浏览器默认1rem为16px
(1rem:16px),可根据font-size更改默认rem大小。
原理：
根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以根元素的字体大小来进行变化，从而实现我们要的移动端自适应。
移动端适配的几种方法：
1.流式布局：宽度百分比（比较父级占比），高度固定。此处不推荐，缺点大屏幕拉伸文字。

2.媒体查询配合rem布局，主流适配方法，缺点工作量大。

3.flex布局，主流的移动端布局方式，项目最好采用flex布局+rem布局的方式完成移动端适配。（优先选用方法）

JS控制屏幕变化原理

类似于媒体查询的原理，js使用动态更改html下的font-size大小 来实现移动适配。代码如下；

此处等于媒体查询更改font-size（js实现动态更改）。
px转换rem方法推荐
Vscode下载插件：

更改插件的默认文件：

1.点击插件旁设置后点击扩展设置即可弹出下面内容。

以上使用js和rem搭配flex即可实现移动端自适应。

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。

标签：天迅达科技 天津APP开发 天津网站建设 网站建设