关于移动端常用的自适应方法

1.rem+less+媒体查询

2.flexble.js+rem

一、适配的目的

让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候等比例适配当前设备

二、关于rem

rem是相对根元素字体的一个单位，当页面元素使用rem做尺寸单位的时候，当HTML字体发生变化的时候，页面元素的尺寸也会发生等比例的变化

三、适配方案一

3.1rem+less+媒体查询

我是在webstorm里面做的适配测试，但是webstorm里面的less转换为CSS文件我觉得会比较麻烦，读者可以自行百度实现转化

 

在test.less里面主要实现了媒体查询

//将屏幕划分为15等分
@no:15;
//320尺寸
@media screen and (min-width: 320px){
  html{
    font-size: 320px / @no;
  }
}

//400尺寸
@media screen and (min-width:400px){
  html{
    font-size: 400px / @no;
  }
}

//375尺寸
@media screen and (min-width: 375px){
  html{
    font-size: 375px / @no;
  }
}

转换为CSS之后

@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}

然后在index实现div的样式

div{
  height: 10rem;
  width: 10rem;
  background-color: #1b6d85;
  margin: 0 auto;
}

可以看到这个时候的页面元素已经可以随着不同的设备等比例缩放了

 

 3.2flexible.js+rem

首先这个flexible的下载地址：https://github.com/amfe/lib-flexible

解压之后文件夹里面的index文件就是所需要的JS文件，还有一个min文件，这个和index文件是差不多的，只不过这个是压缩过的Js文件

然后将index.js文件修改名称（主要看个人习惯要不要修改）引入到index.html页面

 

 在index1.css文件修改div的样式

div {
  height: 5rem;
  width: 5rem;
  background-color: #1b6d85;
  margin: 0 auto;
}

结果如下：

 

 为什么要除以10呢？

因为在flexible里面的规则就是获得目前的屏幕尺寸，最终划分为10等分实现适配

 

 

 所以除以10获得每一份的大小，但是我在div里面设置的是5rem，所以需要再乘以5

 

以上就是两种常见的适配方案啦~