移动端适配——rem布局/媒体查询/flexible，‘练习仿苏宁移动端首页

1、rem+less+@media
2、flexible+css+cssroot插件

rem是针对html的字体大小来说的，所以只要查询html的宽度大小进行字体设置，就能达到整个页面范围内的尺寸变化。一个页面中只有一个html元素，与所有的页面元素尺寸挂钩，达到了整体控制的目的。
而html的尺寸变化，通过媒体查询@media


媒体查询：






引入资源：
每个尺寸，写一套不同的样式表



使用less：前几个博客里有学。
使用less+rem+@media写适配：


3、




4、写一个

//默认,媒体查询再底下，代码是从下往上执行的，底下覆盖上面
html{
  font-size: 50px;
}

// 320
@no:15;
@media screen and(min-width:320px){
  html{
    font-size: 320px/@no;
  }
}

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

// iphone6,7,8
@media screen and(min-width:375px){
  html{
    font-size: 375px/@no;
  }
}

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

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

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

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

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

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

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

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

然后写特殊样式，在index.less中引入common.less就成


弹性盒模型

2、
flexible下载
https://github.com/amfe/lib-flexible
js自动媒体查询，也就是说我们只要写rem代码适配就够了，需要把px转化成rem。（使用cssrem)

引入之后，会自动检测html的尺寸设置font-size

记得设置max-width

贼好用的插件，能把px转换成rem

但是默认的1rem是16px，我们需要设置

设置默认是75px(750/10)，之后其他的就是自动媒体查询修改了


最后，还要有一个问题是flexible中的font-size自定义为pc端大小。我们需要把它变成最大只有750


就像这样，改成rem就成