响应式设计: 网站两栏布局(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
后记：
- 网络上的一些教程有时候层次不齐，当然有时候搜索关键词也非常重要，最开始我主要搜索的是自适应，后面搜索响应式才是我想要的内容；
- 另外，也太久没有接触HTML+CSS，怀念N年前在本地折腾样式和布局的那些日子。
- 下一篇：翻译API初体验：坑爹的有道翻译
- 上一篇：记第一次Python项目部署踩的坑