源起

• 智能手机越来越重要
• 上网设备之间的尺寸差距与日俱增

智能手机越来越重要

上网设备之间的尺寸差距与日俱增

手机，平板，电脑……

传统的解决方法

响应式网页设计

RWD，Responsive Web Design，由伊桑·马科特(Ethan Marcotte)提出。他在 A List Apart 发表了一篇开创性的文章，将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来，并命名为响应式网页设计。

实现

• viewport
• media query

viewport

media query

								
@media screen and (min-width: 480px) and (max-width: 767px) {
  body{
    background: #ce33eb;
  }
}
							

逻辑操作符： and, not, only...

检测特性： width, height, device-width, device-height, orientation, aspect-ratio, color, color-index, monochrome, resolution...

Tips

• 限制最大宽度
• 百分比单位
• 弹性图片
• 导航栏

限制最大宽度

							
<div class="container">
 <h2>What will I learn?</h2>
</div>
							
						

							
.container {
  margin: auto;
  max-width: 800px;
}
							
						

百分比单位: em, rem

百分比单位: em, rem

弹性图片

							
img {
  max-width: 100%;
}
							
						

导航栏

框架分析

Foundation Media Query

两个断点: 40.063em 和 64.063em

Foundation Media Query

Foundation Visibility Class

工具

• Modernizr
• Responsinator, screenqueri

Modernizr

Modernizr 修复样式

							
.note {
  display: none;
}
.no-canvas .note {
  display: block;
}
							
						

Modernizr 按需加载

							
Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: 'js/respond.min.js'
})