在网站源码后台增加响应式布局

一本教材上的网站源码，后台在手机上查看还是按照电脑的页面样式，不方便查看和发布新内容。教材上讲了响应式布局。对于页面结构简单的网站，可以利用响应式，使页面自动适用各种屏幕的分辨率。

今天在一个网站源码的后台使用了响应式布局。该网站源码后台页面是品字型结构。分上、左、右三部分。为了方便手机上查看及发表后台内容，需要将品字形结构改成上下结构。分两步进行。第一步，应用响应式布局。第二步，改页面结构。

第一步，应用响应式布局。

将教材里的几行代码录入。最简单的是在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>

这样修改以后，在手机上看到的后台页面也好了很多。当然，还有需要改进的地方。如果实在不满意，就另外编写手机端后台界面。