从手机屏幕到电视大屏，轻松学会CSS响应式网站制作技巧

在当今这个移动设备与桌面设备并存的时代，制作一个能够适应不同屏幕尺寸和分辨率的响应式网站显得尤为重要。CSS（层叠样式表）是构建响应式网站的关键技术之一。本文将带你从基础到实践，轻松学会CSS响应式网站制作技巧。

一、什么是响应式网站？

响应式网站是指能够根据不同设备屏幕尺寸自动调整布局和内容的网站。这样，无论用户使用手机、平板还是电脑访问，都能获得良好的浏览体验。

二、CSS响应式网站制作基础

1. 媒体查询（Media Queries）

媒体查询是CSS3中用于创建响应式网站的核心技术。它允许我们根据不同的屏幕尺寸、分辨率、设备特性等条件，应用不同的样式规则。

@media screen and (max-width: 600px) {
  /* 手机屏幕样式 */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 平板屏幕样式 */
}

@media screen and (min-width: 1025px) {
  /* 桌面屏幕样式 */
}

2. 流式布局（Fluid Layout）

流式布局是指网页元素宽度随着浏览器窗口宽度变化而变化的布局方式。这可以通过百分比宽度或视口单位（vw）来实现。

.container {
  width: 100%;
}

.item {
  width: 20%; /* 百分比宽度 */
}

.item {
  width: 10vw; /* 视口单位 */
}

3. 固定布局（Fixed Layout）

固定布局是指网页元素宽度固定，不随浏览器窗口宽度变化而变化的布局方式。这可以通过固定像素值或视口单位（vh）来实现。

.container {
  width: 960px; /* 固定像素值 */
}

.item {
  width: 240px; /* 固定像素值 */
}

.item {
  width: 20vh; /* 视口单位 */
}

三、CSS响应式网站制作实践

1. 响应式导航菜单

以下是一个简单的响应式导航菜单示例：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

@media screen and (max-width: 600px) {
  nav ul {
    display: flex;
    flex-direction: column;
  }
}

2. 响应式图片

以下是一个简单的响应式图片示例：

<img src="image.jpg" alt="示例图片">

img {
  width: 100%;
  height: auto;
}

3. 响应式表格

以下是一个简单的响应式表格示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

@media screen and (max-width: 600px) {
  table {
    display: block;
  }
  thead {
    display: none;
  }
  tbody tr {
    display: block;
    margin-bottom: 0.625rem;
  }
  td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

四、总结

通过本文的学习，相信你已经掌握了CSS响应式网站制作的基本技巧。在实际开发过程中，你可以根据项目需求，灵活运用这些技巧，打造出适应各种设备的优质网站。祝你学习愉快！