通过媒体查询，针对不同的设备的尺寸设置断点来改变布局

屏幕 设备 断点
超小屏幕 手机 <768px 小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px 大屏幕 桌面 >=1200px

常用媒体查询尺寸：
1200px
1100px 1000px 1024px
980px
768px 720px
640px
480px
375px
320px
280px

一、超大屏

@media screen and (min-width:1200px){
  }

二、1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
}

三、880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
}

四、720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
}

五、440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
}