现在，随着移动设备的普及，响应式网站已经成为了Web开发的主流趋势。它可以让网站在不同的设备上自动调整布局，使得用户能够在任何设备上都能够舒适地浏览网站。而CSS是响应式网站的核心，使用CSS可以让我们更加灵活地控制网页的显示效果。接下来，我们就来介绍CSS实现响应式网站的方法。

一、媒体查询

媒体查询是CSS实现响应式布局的关键。通过媒体查询，我们可以根据不同的屏幕尺寸为不同的设备设置不同的样式。以下是媒体查询的示例代码：

@media screen and (max-width: 768px) {
  /* 在小于等于 768px 时生效的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在 769px 到 1024px 之间生效的样式 */
}

@media screen and (min-width: 1025px) {
  /* 在大于等于 1025px 时生效的样式 */
}

在上述代码中，我们使用了@media规则，以及max-width和min-width这两个属性。其中，max-width表示最大宽度，min-width表示最小宽度。通过设定不同的max-width和min-width，我们可以为不同的设备设置不同的样式。

二、弹性盒子布局

弹性盒子布局，也叫Flex布局，是一种CSS3新特性，可以使得元素在容器中自适应布局。在响应式网站中，我们常常使用Flex布局来使得容器中的元素自动换行，避免了因为屏幕宽度不足而导致的页面布局崩溃的问题。以下是Flex布局的示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 30%;
}

在上述代码中，我们使用了flex、flex-wrap和justify-content这三个属性。其中，flex属性定义了弹性盒子的基本样式，flex-wrap属性则是用来定义元素如何换行，justify-content属性则用于定义元素在容器中水平方向上如何排列。通过这三个属性的搭配，我们可以轻松地实现基于Flex布局的响应式网站。

三、CSS框架

借助CSS框架，我们可以更加便捷地创建响应式网站，并且实现良好的浏览器兼容性。在现代Web开发中，Bootstrap是最受欢迎的CSS框架之一，它提供了响应式布局、导航栏、表单等常用组件和样式库。以下是Bootstrap的示例代码：

  
  
  
  
  
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




  

  
   
Hello, world!
  
   
This is a Bootstrap example.