响应式网页开发基础教程（jQuery+Bootstrap）全套教学课件.pptx

全套课件第1章 响应式网页设计基础响应式网页设计基础什么是响应式网页示例：Ethan Marcotte个人的响应式网页/https/:////手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口尺寸下，页面显示是否有变化？自动适应、流式网格布局、流式图像显示什么是响应式网页“自适应网页”就是 响应式网页 ??不同浏览终端打开的并非同一个地址、同一个网页，这种不是真正的响应式什么是响应式网页响应式网页的核心思想：“一次设计，普遍适用”不管使用什么设备，打开及显示的都是同一个地址、同一个网页，布局及显示适应不同的浏览环境什么是响应式网页响应式网页的特点媒体查询及应用媒体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程，可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。关键字：@media媒体查询对浏览器的支持媒体查询及应用CSS 3 媒体查询定义语句的基本格式：style@media (适用条件1) and/or (适用条件2)…{适用的CSS 样式}/style媒体查询及应用例1-1@media screen and (max-width: 300px)?{body?{?background-