第1章 响应式Web设计基础

武汉传媒学院武汉传媒学院本章主要内容•定义响应式Web设计•如何确定浏览器支持度•第一个响应式的例子武汉传媒学院1.1课程介绍•响应式网站设计是一种网络页面设计布局•理念是:集中创建图片排版，根据用户行为以及设备环境进行相布局武汉传媒学院响应式网页设计-案例武汉传媒学院响应式网页设计-案例武汉传媒学院1.2什么是响应式Web设计•响应式Web设计是由EthanMarcotte在2010年发明的•他在一篇文章中综合运用了三种已有技术实现了一个解决方案弹性风格布局、弹性图片、媒体查询武汉传媒学院1.2什么是响应式Web设计•响应式Web设计：网页内容会随着访问它的视口及设备的不同呈现不同样式•设计思路：先为小屏幕设计内容，然后向大屏幕扩展渐进增强武汉传媒学院1.3浏览器支持•浏览器支持(兼容性)一直是Web设计的最大问题•时间问题•预算问题•解决方案：先写轻量的代码架构，然后根据能力更强的浏览器进行扩展•视觉•功能武汉传媒学院1.3浏览器支持•确定平台与浏览器版本支持哪些特性：武汉传媒学院•文本编辑器：•Notepadd++•DreamWeaver•JBulider•Editplus……•运行工具：浏览器•IE•FireFox•Chrome•……1.3浏览器支持武汉传媒学院1.4第一个响应式的例子第一个响应式的例子缩放窗口弹性布局武汉传媒学院1.4第一个响应式的例子•视口(viewport)：浏览器中用于呈现网页的区域•metaname=”viewport”content=”width=device-width”缩放浏览器窗口时,视口不等于屏幕大小按照设备的宽度渲染网页内容武汉传媒学院1.4第一个响应式的例子•图片自动缩放：图片最大为自身的100%，容器大于图片时，图片自动缩放img{max-width:100%;}不能设置成：width:100%武汉传媒学院1.4第一个响应式的例子•媒体查询：用于当页面布局存在严重被拉伸时，调整布局•让我们在某些条件下为网页应用样式调整样式武汉传媒学院1.4第一个响应式的例子•断点：宽度临界点，当超过断点时，页面布局发生明显变化•@mediascreenand(min-width:50rem)针对视口宽度在50em以上的窗口中生效