Bootstrap初级用户谈谈网页在手机上的显示效果优化

本文转载自查看原文 2016-11-25 13:56 1505 css/ Bootstrap/ bootStrap

本人之前已经使用 Bootstrap有一段时间了，但是之前做出的网站都只是在电脑端使用，没有注意过手机端的显示效果。这两天自己使用 Bootstrap做了一个简单的Web个人日志系统，想在手机端也使用，桌面端的效果勉勉强强，但是当用手机打开页面时，效果不忍直视。下面是其中一个界面的效果。

桌面浏览器查看效果：

手机浏览器查看效果：

问题一：字体非常的小，简直认不出来

于是我百度以及查看 Bootstrap的文档，终于找到了解决方案：

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

可以参见 Bootstrap中文文档中的原话：

只要在 <header>中加上这句话，手机端看到的字体就会比较合理。看下面的效果图。

现在看起来效果好多了，文字能够非常清晰的显示出来。

问题二来了：上面的`<ul>`导航占了太多的空间，影响了核心内容的显示

我的导航是用以下代码实现的：

<div>
  <ul class="list-group text-align-center">
    <li class="list-group-item"><h3>效率为王</h3></li>
    <li class="list-group-item"><a href="timeflow">流水</a></li>
    <li class="list-group-item"><a href="summary">总结</a></li>
    <li class="list-group-item"><a href="idea">灵感</a></li>
    <li class="list-group-item"><a href="thought">感想</a></li>
  </ul>
</div>

我想让”流水””总结”等4个导航链接排列在一行中，但又不想自己大改 Bootstrap原来的 CSS (实际上自己也不是很熟练 CSS)。于是我就想绕开 CSS的细节技术，想到了在超小屏幕下不显示这个导航，转而实现一个简单的超链接列表。

<div class="hidden-xs">
  <ul class="list-group text-align-center">
    <li class="list-group-item"><h3>效率为王</h3></li>
    <li class="list-group-item"><a href="timeflow">流水</a></li>
    <li class="list-group-item"><a href="summary">总结</a></li>
    <li class="list-group-item"><a href="idea">灵感</a></li>
    <li class="list-group-item"><a href="thought">感想</a></li>
  </ul>
</div>
<div class="hidden-sm hidden-md hidden-lg hidden-print">
  <h3>效率为王</h3>
  <a href="timeflow">流水</a>
  <a href="summary">总结</a>
  <a href="idea">灵感</a>
  <a href="thought">感想</a>
  <hr/>
</div>

上面的代码是在原来的 <div>上应用了 .hidden-xs样式，意思是超小屏幕下不显示该 <div>。然后我又写了一个简单的 <div>，包含4个导航链接，而这个 <div>则应用了 .hidden-sm .hidden-md .hidden-lg .hidden-print样式，表示只在超小屏幕下显示。

关于 .hidden-?样式，可以在 Bootstrap中文文档中看到这样一段画：