CSS 中的响应式网站 - HTML

CSS 中的响应式网站是为了适应不同设备上的网页浏览而设计的。通过使用 CSS 媒体查询和视口(viewport)单位，可以让网站自动适配各种屏幕尺寸。

媒体查询(Media query)

媒体查询是指针对不同设备分别设置样式，从而实现响应式网站。例如，通过媒体查询可以针对屏幕宽度不同，设置不同的布局和字体大小。

以下是一个基本的媒体查询示例：

@media (min-width: 768px) {
  /* 在屏幕宽度大于等于768px时应用下面的样式 */
  body {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  /* 在屏幕宽度小于768px时应用下面的样式 */
  body {
    font-size: 14px;
  }
}

视口(Viewport)

视口是指浏览器显示网页内容的区域。在移动设备上，由于屏幕较小，往往需要将网页缩小后才能完全显示。而使用视口单位可以直接以视口作为参考来设置长度和宽度。

以下是一些常用的视口单位：

• vw: 视口宽度的百分比。
• vh: 视口高度的百分比。
• vmin: 视口宽度和高度中较小的那个的百分比。
• vmax: 视口宽度和高度中较大的那个的百分比。

比如，我们可以将一个元素宽度设置为视口宽度的50%：

.box {
  width: 50vw;
}

响应式图片

在响应式网站中，为了适应不同设备的屏幕尺寸，需要对图片进行响应式处理。

可以通过以下方法对图片进行响应式处理：

<img src="image.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="响应式图片">

其中，srcset 属性指定了不同分辨率的图片地址和对应的倍数。浏览器会根据设备的像素密度自动选择合适的图片。

响应式布局

在响应式网站中，常常需要使用不同的布局来适应不同设备的屏幕尺寸。

可以使用以下方法实现响应式布局：

1. 使用 CSS 媒体查询来设置不同设备分别的布局。

2. 使用 CSS Flexbox 或 CSS Grid 等新的布局技术，来实现自适应布局。

例如，可以在大屏幕上使用三栏布局，在小屏幕上使用单栏布局：

<div class="wrapper">
  <div class="col col-1">栏目一</div>
  <div class="col col-2">栏目二</div>
  <div class="col col-3">栏目三</div>
</div>

.col {
  padding: 10px;
}

@media (min-width: 768px) {
  /* 在屏幕宽度大于等于768px时应用三栏布局 */
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .col {
    width: calc(33.33% - 20px);
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  /* 在屏幕宽度小于768px时应用单栏布局 */
  .col {
    width: 100%;
    margin-bottom: 10px;
  }
}

总结

CSS 中的响应式网站可以实现让你的网站自动适应不同设备的屏幕尺寸。需要使用 CSS 媒体查询和视口单位来实现响应式布局和响应式图片。在实现响应式布局时，可以使用 CSS Flexbox 或 CSS Grid 来实现自适应布局。