响应式设计原理与IE兼容

问题

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

解答

什么是响应式设计

响应式设计（Responsive Web Design）是一种网页设计方法，使网站能够根据不同设备的屏幕尺寸、分辨率自动调整布局和内容展示。一套代码适配多种设备。

基本原理

1. 媒体查询（Media Queries）

/* 默认样式 - 移动优先 */
.container {
  width: 100%;
  padding: 10px;
}

/* 平板设备 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 桌面设备 */
@media screen and (min-width: 1024px) {
  .container {
    width: 980px;
  }
}

/* 大屏设备 */
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

2. 流式布局（Fluid Layout）

.wrapper {
  /* 使用百分比代替固定像素 */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  width: 25%; /* 相对父元素的百分比 */
  float: left;
}

.main-content {
  width: 75%;
  float: left;
}

3. 弹性图片和媒体

/* 图片自适应 */
img {
  max-width: 100%;
  height: auto;
}

/* 视频自适应 */
video {
  max-width: 100%;
  height: auto;
}

/* 响应式背景图 */
.hero {
  background-image: url('small.jpg');
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .hero {
    background-image: url('large.jpg');
  }
}

4. 视口设置

<!-- 必须在 head 中添加 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. 相对单位

html {
  font-size: 16px; /* 基准字号 */
}

.title {
  font-size: 1.5rem; /* 相对于根元素 = 24px */
}

.content {
  font-size: 1em;    /* 相对于父元素 */
  padding: 2vw;      /* 相对于视口宽度 */
}

IE 兼容方案

1. respond.js - 让 IE6-8 支持媒体查询

<!--[if lt IE 9]>
  <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

2. html5shiv - 让 IE 识别 HTML5 标签

<!--[if lt IE 9]>
  <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

3. CSS Hack 针对特定 IE 版本

.element {
  width: 100px;      /* 所有浏览器 */
  *width: 90px;      /* IE7 及以下 */
  _width: 80px;      /* IE6 */
}

/* 条件注释方式 */
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->

4. 使用 Polyfill 补充功能

<!--[if lt IE 9]>
  <!-- CSS3 选择器支持 -->
  <script src="selectivizr.js"></script>
  <!-- rem 单位支持 -->
  <script src="rem.js"></script>
<![endif]-->

5. 渐进增强策略

/* 基础样式 - 所有浏览器可用 */
.box {
  display: block;
  float: left;
  width: 33.33%;
}

/* 现代浏览器增强 */
@supports (display: flex) {
  .container {
    display: flex;
  }
  .box {
    float: none;
    flex: 1;
  }
}

关键点

• 媒体查询是响应式设计的基础，通过 @media 规则针对不同屏幕应用不同样式
• 流式布局使用百分比、vw/vh、rem 等相对单位代替固定像素
• viewport meta 标签必须设置，否则移动端会按桌面宽度缩放
• IE8 及以下不支持媒体查询，需要 respond.js；不支持 HTML5 标签，需要 html5shiv
• 移动优先（Mobile First）是推荐的开发策略，先写移动端样式，再用 min-width 媒体查询扩展