H5页面适配所有移动端，用rem设置样式

（提示：本篇文值供本人意会记忆。很多术语不准确，避免误导萌新，请移步其他大佬的教程）

1.在Index.html文件里：

用js动态设置html的font-size：

2.在样式文件里：（css/less）

因为默认是1080为基准，如果设计图是以width:360px设计。

则： 应写为：width:10.8rem (相当于1px = 0.03rem)

******************注意背景图片的设置，这三句最好当做固定语句一起写，不然图片就会emmmmm：

background-image: url(./NewYearBanner.png);
background-repeat:no-repeat; 
background-size:100% 100%;

3.如果页面内容超过屏幕高度（默认情况下：整个page设置为高度自适应=>height:auto）

在最后的板块部分，首先在最外层设置一个wrap，设置为弹性布局。然后利用padding-bottom属性，把页面颜色撑开.

 

 

实例：这样空白的颜色就会被撑满，就能达到所有移动端兼容了！