响应式网页设计 - 框架
有许多免费的 CSS 框架 提供响应式设计。
使用 W3.CSS
创建响应式设计的一个好方法是使用响应式样式表，如 W3.CSS
CSS 使得开发任何大小的网站都很容易！
W3.CSS 实例
调整页面大小以查看响应！
伦敦
伦敦是英国的首都
它是英国人口最多的城市，拥有超过1300万居民的大都市
巴黎
巴黎是法国的首都
巴黎地区是欧洲最大的人口中心之一，有1200多万居民
东京
东京是日本的首都
它是大东京地区的中心，世界上人口最多的大都会地区
示例代码如下：
<!DOCTYPE html><html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/example/css3/ms.css" rel="stylesheet" type="text/css" /><body><div class="ms-container ms-green"><h2>W3.CSS 实例</h2><p>调整页面大小以查看响应！</p></div><div class="ms-row-padding ms-light-grey"><div class="ms-third"><h2>伦敦</h2><p>伦敦是英国的首都</p><p>它是英国人口最多的城市，拥有超过1300万居民的大都市</p></div><div class="ms-third"><h2>巴黎</h2><p>巴黎是法国的首都</p><p>巴黎地区是欧洲最大的人口中心之一，有1200多万居民</p></div><div class="ms-third"><h2>东京</h2><p>东京是日本的首都</p><p>它是大东京地区的中心，世界上人口最多的大都会地区</p></div></div></body></html>
提示：要想要了解更多关于 W3.CSS 的信息，请阅读本站的 W3.CSS 教程。
Bootstrap
另一个流行的框架是 Bootstrap，它使用 HTML、CSS 和 jQuery 来生成响应的web页面：
<html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><div class="container"><div class="jumbotron"><h1>我的第一个 Bootstrap 页面</h1><p>调整此响应页面的大小以查看效果！</p></div><div class="row"><div class="col-sm-4"><h3>第 1 列</h3><p>这是一些文本，这是一些文本，这是一些文本...</p><p>这是一些文本，这是一些文本，这是一些文本...</p></div><div class="col-sm-4"><h3>第 2 列</h3><p>这是一些文本，这是一些文本，这是一些文本...</p><p>这是一些文本，这是一些文本，这是一些文本...</p></div><div class="col-sm-4"><h3>第 3 列</h3><p>这是一些文本，这是一些文本，这是一些文本...</p><p>这是一些文本，这是一些文本，这是一些文本...</p></div></div></div></body></html>