移动端的响应式布局

什么是移动端响应式布局呢？
移动端响应式布局就是根据用户使用不同大小的手机时，会展示不同样式的布局，这便是响应式布局，虽然响应式布局好处多多，但也有诸多坏处，它需要庞大的人力以及财力，以及很高维护成本，而且会极大的耗损用户的流量。因此只有大公司才会用，但很多大公司也不会采用。
首先会用到媒体查询：
@media screen and (min-width: 1001px) { // 屏幕宽度 > 1001时采用的样式}
@media screen and (max-width: 1001px) { // 屏幕宽度 < 1001时采用的样式}

//这样是它的最大宽度为1000px的样式
@media screen and (max-width:1001px) {
   写css样式
}
//这样是最小宽度为1000px的样式
@media screen and (min-width:1001px){
  写css样式
}

这样，当屏幕小于1001时，会出现一个版，屏幕大于1001时又会出现一个版，这样给不同用户展示不一样的版，有利于提高用户的体验。