响应式设计课程(序章)

1、什么是响应式网页

在前端开发过程中，为解决网页在不同设备的显示问题而提出的解决方案。使其能自动改变网页内容的大小、布局，来适应不同分辨率的屏幕。

2、Web开发常用工具

3、响应式开发中的媒体查询@media

@media (min-width:Xpx) {
/* CSS样式代码 /
}
/ 宽度在X~+ 之间时（即大于X时），应用当前CSS样式 */

@media (max-width:Xpx) {
/* CSS样式代码 /
}
/ 宽度在0~X之间时（即小于X时），应用当前CSS样式 */

@media (min-width:Xpx) and (max-width:Ypx) {
/* CSS样式代码 /
}
/ 宽度在X~Y之间时，应用当前CSS样式 */

3.1不同断点区间的媒体查询语句的书写

断点区间	媒体查询语句
w>=1440	@media (min-width:1440px) {}
1440>w>=1280	@media (min-width:1280px) and (max-width:1439px) {}
1280>w>=1024	@media (min-width:1024px) and (max-width:1279px) {}
1024>w>=768	@media (min-width:768px) and (max-width:1023px) {}
768>w>=640	@media (min-width:640px) and (max-width:767px) {}
640>w>=375	@media (min-width:375px) and (max-width:639px) {}
375>w	@media (max-width:374px) {}

@media (min-width:Xpx) and (max-width:Ypx) {  
    /* CSS样式代码 */  
}