VookLess

Menu

响应式设计: 网站两栏布局(HTML+CSS)

之所以要到博客记录一下是因为本来一个很简单的事情,真的折腾了两个多小时,要吐了,最后终于搞定。

需求说明:

需要做一个小型展示页面,做两栏就可以,类似于WordPress博客那种形式,看上去也是一个比较简单的需求,不过因为考虑到需要适合移动端访问就需要做到自适应。

折腾过程:

--V1.0
最开始采取的是直接加上左右两侧DIV通过F5配置一下样式,发现无果后开始求助现成方案。
--V2.0
采取的是float + BFC布局,在PC端确实也达到了效果,不过放到移动端右侧一遍直接看不到了,F5一看是右边这个DIV直接被挤掉了
--V3.0 Final
采取响应式设计布局,稍微调试一下,大功告成。感谢这篇响应式设计的教程,非常给力!

代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A simple float-based responsive design</title>
    <style>
      body {
        font: 1.2em Helvetica, Arial, sans-serif;
        margin: 20px;
        padding: 0;
        background-color: #eee;
      }
      .wrapper {
        max-width: 960px;
        margin: 2em auto;
      }

      .col1,
      .col2 {
        background-color: #fff;
      }

      @media screen and (min-width: 600px) {
        .col1 {
          width: 31.24999999%;
          float: left;
        }

        .col2 {
          width: 64.58333331%;
          float: right;
        }
      }
    </style>
</head>

<body>

    <div class="wrapper">
      <div class="col1">
        <p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
      </div>
      <div class="col2">
          <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
          <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
      </div>

    </div>
</body>

</html>

备注:我本地代码跟项目代码基本一致,代码部分摘自github

后记:

  1. 网络上的一些教程有时候层次不齐,当然有时候搜索关键词也非常重要,最开始我主要搜索的是自适应,后面搜索响应式才是我想要的内容;
  2. 另外,也太久没有接触HTML+CSS,怀念N年前在本地折腾样式和布局的那些日子。
— 于 共写了1597个字
— 文内使用到的标签:

发表评论

邮箱地址不会被公开。 必填项已用*标注