1.什么是响应式布局？

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

2 响应式开发的原理？

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

3.设备的划分情况为：

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

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

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

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

4.写代码注意事项：

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

代码语言：javascript复制@media （max-width:1920px）{

width:100px;

height:100px;

background:pink;

}

//省略不写！

@media （max-width:1336px）{

width:100px;

height:100px;

background:pink;

}