一本教材上的网站源码，后台在手机上查看还是按照电脑的页面样式，不方便查看和发布新内容。教材上讲了响应式布局。对于页面结构简单的网站，可以利用响应式，使页面自动适用各种屏幕的分辨率。
今天在一个网站源码的后台使用了响应式布局。该网站源码后台页面是品字型结构。分上、左、右三部分。为了方便手机上查看及发表后台内容，需要将品字形结构改成上下结构。分两步进行。第一步，应用响应式布局。第二步，改页面结构。
第一步，应用响应式布局。
将教材里的几行代码录入。最简单的是在layout.html的head部分添加如下一行。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这一行的意思是使用视窗，宽度为设备宽度，初始比例系数为1。
对于分辨率为2312×1080（高×宽）的手机屏幕，屏幕实际宽度只有电脑屏幕1920*1080（宽×高）宽度的1/4左右。
第二步，改页面结构为上下结构。将左侧的放到上方，将右侧的放到下方。这里需要修改layout.css文件和layout.html 。将前台的界面里的style.css里的如下两行内容复制到layout.css。
/* 顶部导航 */
.top-nav{float:left;margin-right:15px;margin-top:0px;}
将layout.html里的两行修改成如下内容：
原内容：
<!-- 左侧导航 -->
<div class="nav">
修改后内容：
<!-- 顶部导航2 -->
<div class="top-nav">
另外还要修改layout.html里的几行内容。
原内容：
<!-- 内容区域 -->
<div class="content">
<iframe src="./cp_index.php" frameborder="no" name="panel"></iframe>
</div>
修改后内容：
<br><br><br><br>
<!-- 内容区域 -->
<iframe src="./cp_index.php" frameborder="no" width=100% height=100% name="panel"></iframe>
这样修改以后，在手机上看到的后台页面也好了很多。当然，还有需要改进的地方。如果实在不满意，就另外编写手机端后台界面。
