3.1什么是响应式布局?
答:在一个项目的内容(模块、布局、内容)发生增删改时,项目可以自适应的发生一定变化而且不影响用户使用,且更换不用的设备可以同样访问此项目;这样的布局叫做响应式布局!
优点:一个项目适应不用设备;缺点:开发成本高,设计和ui方案都比较多;
3.2如何实现响应式布局?
答:媒体查询:监测设备的特性,根据所指定的条件,设置不同的css样式。
(例如:监测浏览器窗口的宽度,如果小于320px body背景为红色)
媒体查询一般监测:视口的宽度、浏览器窗口的宽、屏幕的比例、横屏、竖屏......
媒体查询的组成:
@media 设备类型[all\screen] and (条件表达式) and (条件表达式){ css样式 }
注:and关键字两侧必须有空格,条件表达式不需要分号结束;
通过识别设备改变布局!
例如:
@media not all and (min-width:1000px) and (max-width:1200px){
body{ background:red; }
}