[聚合文章] 使用响应式设计改造小说网站

因为要在其它设备上测试响应式设计的效果，需要先对开发环境做些简单的配置。

启动服务器时需加上本机的IP地址和访问端口（通常是80）：

rails s -b 192.168.0.100 -p 80

配置Windows系统的内置防火墙，开启80端口以供其它设备访问：

netsh advfirewall firewall add rule name="Open Port 80" dir=in action=allow protocol=TCP localport=80

查看和删除防火墙规则的命令：

netsh advfirewall firewall delete rule name="Open Port 80" protocol=TCP localport=80
netsh advfirewall firewall show rule name="Open Port 80"

响应式设计的优缺点就不多说了，已经有太多的文章讲过这些。这里主要讲如何使用响应式设计改造现有的小说网站。

首先，需要使用viewport标签设置屏幕宽度为设备宽度，使网站内容可以适应响应式变化。

<meta name="viewport" content="width=device-width, initial-scale=1" />

因为这是一个非常简陋，并且以内容为主的网站。在上述设置后几乎不用再修改就能适应不同屏幕分辨率下的信息呈现，除了导航栏因为导航选项较多，在手机等设备上打开会出现后面部分选项被挤下去。抽屉样式的导航是解决这个问题的好方法。在网上找到一个横向导航栏切换成抽屉式导航栏的库 jQuery PageSlide ，它使用图片实现三明治图标，所以对它做了些修改，用标签来实现：

<ul class="burger">
  <li></li><li></li><li></li>
</ul>

对应的CSS代码如下：

.burger {
  li {
    height: 4px;
    width: 30px;
    background: #000;
    border-radius: 3px;
    margin: 5px 0;
  }
}

要实现响应式的话，只要让它在正常情况下隐藏，屏幕变小时显现即可：

.burger {
  display: none;
}

@media screen and (max-width: 480px) {
  .burger {
    display: block;
  }
}

还需要在application.html.erb的底部开启点击三明治图标时的响应事件：

<%= javascript_include_tag "jquery.pageslide", "data-turbolinks-track" => true %>
<script>
  $(".burger").pageslide();
</script>

导航条的CSS也需要做些修改才能在屏幕变小时转换成抽屉式导航条。

nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  &:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  li {
    float: left;
    width: 14.2%;
    text-align: center;
    a {
      display: block;
      background: #000;
      color: #fff;
      font-weight: bold;
      padding: 10px;
      border-right: 1px solid #fff;
      &:hover {
        background: #333;
      }
    }
  }
}

以下是当屏幕变小时的CSS代码：

@media screen and (max-width: 480px) {
  nav ul {
    display: none;
  }
}

至此，小说网站的响应式改造就基本完成了。如果您觉得对你有所帮助，请将此文发送给你的朋友，如果你还有更好的建议也可以在下面的评论中分享你的经验。