响应式布局

1.什么是响应式布局？
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

2 响应式开发的原理？
响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

3.设备的划分情况为：

小于768的为超小屏幕（手机）

768~992之间的为小屏设备（平板）

992~1200的中等屏幕（桌面显示器）

大于1200的宽屏设备（大桌面显示器）

4.写代码注意事项：
写屏幕尺寸宽度，从最大的开始写到最小的。使用less它会有继承性，就是比如1336px的屏幕分辨率也是和1920px的一样的话，那么1366px的就不用写了，可以省略。

@media （max-width:1920px）{
  width:100px;
  height:100px;
  background:pink;
  }
  //省略不写！
  @media （max-width:1336px）{
  width:100px;
  height:100px;
  background:pink;
  }
1
2
3
4
5
6
7
8
9
10
11