rem+css预处理+媒体查询与rem+flexible.js做网页适配

@media mediatype and|not|only (media feature){
css..
}

/*屏幕宽度小于等于800px的样式*/
@media screen and (max-width:800px){
  css...
}

<link href="320.css" media="screen adn (min-width:320px)">
<link href="640.css" media="screen adn (min-width:640px)">

/* 设置常见屏幕尺寸，修改html文字大小*/
//320
/*划分份数为15*/
@num:15;
/*限定html大小 (pc打开直接50px)*/
html{
    font-size: 50px;
}
@media screen and (min-width:320px){
    html{
        font-size: 320px / @num;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size: 360px / @num;
    }
}
/*375*/
@media screen and (min-width:375px){
    html{
        font-size: 375px/@num;
    }
}
/*384*/
@media screen and (min-width:384px){
    html{
        font-size: 384px/@num;
    }
}
/*400*/
@media screen and (min-width:400px){
    html{
        font-size: 400px/@num;
    }
}
/*414*/
@media screen and (min-width:414px){
    html{
        font-size: 414px/@num;
    }
}
/*424*/
@media screen and (min-width:424px){
    html{
        font-size: 424px/@num;
    }
}
/*480*/
@media screen and (min-width:480px){
    html{
        font-size: 480px/@num;
    }
}
/*540*/
@media screen and (min-width:540px){
    html{
        font-size: 540px/@num;
    }
}
/*720*/
@media screen and (min-width:720px){
    html{
        font-size: 720px/@num;
    }
}
/*750*/
@media screen and (min-width:750px){
    html{
        font-size: 750px/@num;
    }
}

.search-content{
    position: fixed;
    left:50%;
    top:0;
    transform: translateX(-50%);/*移动自己宽度的一半*/
    width: 15rem;
    height: 88rem / @baseFont;
    background-color: #ffc001;
    display: flex;
    .class{
        width: 44rem / @baseFont;
        height: 70rem /@baseFont;
        margin: 11rem /@baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background-color: seagreen;
      }
      .search{
          flex:1;
          background-color: sandybrown;
      }
      .login{
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        background-color: rosybrown;
        margin:10rem  / @baseFont
      }
}

html{
  font-size: 20px!important;
}
body{
  min-width: 320px;
  max-width: 750px ;
  /*750划分10份每一份 75px 750/75=10=最大宽度*/
  width: 10rem; /*750/*/
  margin: 0 auto;
  line-height: 1.5;
  background-color: #f2f2f2;
}

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