响应式布局
响应式布局 就是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本，如PC,手机,平板。 优点 ： 1.面对不同的分辨率设备灵活性强 2.能够快速的解决多设备显示的适应问题 3.适合中小型网站 缺点 ： 1.兼容于各种设备工作量大，效率降低 2.代码累赘，以及加载事件过长 原理 ： 通过C3的媒体查询来定制某个宽度区间的网页布局 媒体查询 ：能检测我们设备的宽度，通过不同的宽度显示不同的样式 超小屏幕（移动设备） 768px以下 小屏幕（版本设备） 769px-992px 中屏设备（标屏设备） 992px-1200px 大屏屏幕（宽屏电脑）1200px以上 语法： @media 媒体类型 关键字 媒体特性（即媒体条件） {样式代码} @media screen and (min-width:768px) and (max-width:992px){ //屏幕满足769-992px之间时的样式设置，注意：and后必须有空格} 如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .content{ width: 1000px; height: 500px; margin: 0 auto