响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

初始化默认样式

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #777;
}
a:hover {
  color: #31c27c;
}
/* 设置页面字体大小 */
:root {
  font-size: 14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
}
/* 去除输入框 文本域边框 */
input,
textarea {
  outline: none;
}

定义页面视窗

<!-- 定义视窗 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

• width ：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）
• minimum-scale ：允许浏览者缩放到的最小比例，一般设为1.0。
• maximum-scale ：允许浏览者缩放到的最大比例，一般设为1.0。
• user-scalable ：浏览者是否可以手动缩放，yes或no。

文件引用

@import url(content.css);
/* 超小屏幕 */
@import url(small-x.css) only screen and (max-width: 768px);
/* 小屏幕 */
@import url(small.css) only screen and (min-width: 768px);
/* 中等屏幕 */
@import url(medium.css) only screen and (min-width: 960px);
/* 大屏幕 */
@import url(big.css) only screen and (min-width: 1200px);

需要开启栅格布局

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

超小尺寸屏幕

.col-sm-x-12 {
  grid-column: span 12;
}
.col-sm-x-11 {
  grid-column: span 11;
}
.col-sm-x-10 {
  grid-column: span 10;
}
.col-sm-x-9 {
  grid-column: span 9;
}
.col-sm-x-8 {
  grid-column: span 8;
}
.col-sm-x-7 {
  grid-column: span 7;
}
.col-sm-x-6 {
  grid-column: span 6;
}
.col-sm-x-5 {
  grid-column: span 5;
}
.col-sm-x-4 {
  grid-column: span 4;
}
.col-sm-x-3 {
  grid-column: span 3;
}
.col-sm-x-2 {
  grid-column: span 2;
}
.col-sm-x-1 {
  grid-column: span 1;
}
/* 内容居中 */
.central {
  width: 95%;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

小尺寸屏幕

.col-sm-12 {
  grid-column: span 12;
}
.col-sm-11 {
  grid-column: span 11;
}
.col-sm-10 {
  grid-column: span 10;
}
.col-sm-9 {
  grid-column: span 9;
}
.col-sm-8 {
  grid-column: span 8;
}
.col-sm-7 {
  grid-column: span 7;
}
.col-sm-6 {
  grid-column: span 6;
}
.col-sm-5 {
  grid-column: span 5;
}
.col-sm-4 {
  grid-column: span 4;
}
.col-sm-3 {
  grid-column: span 3;
}
.col-sm-2 {
  grid-column: span 2;
}
.col-sm-1 {
  grid-column: span 1;
}
.central {
  width: 728px;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

中等尺寸屏幕

.col-md-12 {
  grid-column: span 12;
}
.col-md-11 {
  grid-column: span 11;
}
.col-md-10 {
  grid-column: span 10;
}
.col-md-9 {
  grid-column: span 9;
}
.col-md-8 {
  grid-column: span 8;
}
.col-md-7 {
  grid-column: span 7;
}
.col-md-6 {
  grid-column: span 6;
}
.col-md-5 {
  grid-column: span 5;
}
.col-md-4 {
  grid-column: span 4;
}
.col-md-3 {
  grid-column: span 3;
}
.col-md-2 {
  grid-column: span 2;
}
.col-md-1 {
  grid-column: span 1;
}
.central {
  width: 930px;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

超大尺寸屏幕

.col-lg-12 {
  grid-column: span 12;
}
.col-lg-11 {
  grid-column: span 11;
}
.col-lg-10 {
  grid-column: span 10;
}
.col-lg-9 {
  grid-column: span 9;
}
.col-lg-8 {
  grid-column: span 8;
}
.col-lg-7 {
  grid-column: span 7;
}
.col-lg-6 {
  grid-column: span 6;
}
.col-lg-5 {
  grid-column: span 5;
}
.col-lg-4 {
  grid-column: span 4;
}
.col-lg-3 {
  grid-column: span 3;
}
.col-lg-2 {
  grid-column: span 2;
}
.col-lg-1 {
  grid-column: span 1;
}
.central {
  width: 1180px;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

栅格布局

<div class="col-lg-4 col-sm-12 col-sm-x-12"></div>