rem+flexible.js适配移动端

以前都是用媒体查询进行适配，css代码太多，很繁琐，所以果断放弃了
首先说一下rem+flexible.js原理
就是把当前设备划分为10等份，但是不同设备下，比例还是一致的，我们需要做的，就是确定好我们当前设备的html文字大小就可以了。
例如:当前设计稿时750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以了
里面页面元素rem值:页面元素的px值/75,剩余的让flexible.js去算

例如举个例子

打开编译器，首先把配置，这个里面什么意思我就不介绍了

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

body里面

 <div class="search-content">
    <a href="#" class="classify">a</a>
    <div class="search"></div>
    <a href="" class="login">b</a>
  </div>

假如我们的设计稿宽度时750px,那意味着我们的html文字大小就设置为75，我用的编译器是vscode，先下个插件px to rem,在设置里面的setting.json里面，把值改为75，这样通过alt+z，我们就能把px转换为rem了

随便写一些样式

body{
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  margin: 0 auto;
  line-height: 1.5;
  background: #f2f2f2;
}

/* 如果我们的屏幕超过了750px,那么我们就按照750设计稿来走，不会让我们页面超过750px */

@media screen and (min-width:750px){
  html{
    font-size: 75px!important;
  }
}

.search-content{
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 1.173333rem;
  background: #ffc001;
}
.classify{
  width: 0.5867rem;
  height: 0.9333rem;
  background: pink;
  margin: 0.1467rem 0.3333rem 0.1333rem;

}
.search{
  flex: 1;
  background: purple;
}
.login{
  width: 1rem;
  height: 0.933333rem;
  margin: 0.133333rem;
  background: pink;
}

不要忘了加一下媒体查询的代码，当屏幕超过750时需要做的操作,flexible.js这个可以网上下载一个源文件