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

2022-12-18 16:40:22

本人之前已经使用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中文文档中看到这样一段画：