给单商家版电商网站源码增加响应式布局

为了方便在手机上游览及操作，最近给单商家版电商网站源码增加响应式布局。

先给前台添加响应式布局，然后给后台添加响应式布局。

一、给前台添加响应式布局

1.1、给网站前台的layout.html文件增加响应式布局语句。

        <meta name="viewport" content="width=device-width" initial-scale=1.0">

1.2、修改前台style.css文件和页面html文件，并在手机上查看修改效果。

1.2.1、修改了style.css文件一行的内容。

原文：

       body{margin:0;font-size:12px;font-family:'Microsoft YaHei';color:#333;background:#fafafa;}

修改后内容：

        body{margin:0;min-width:580px;font-size:12px;font-family:'Microsoft YaHei';color:#333;background:#fafafa;}

1.2.2、在style.css增加了几行。

        /* 响应式 */
        @media screen and ( max-width:1250px){
        .main-course .m-top-right{float:none;}
        .main-user .m-pro-side{float:none;width:580px;}
        .main-user .m-pro-nav a{display:inline;width:575px;}
        }

二、给后台添加响应式布局

2.1、给网站后台的index.html文件增加响应式布局语句。

        <meta name="viewport" content="width=device-width" initial-scale=1.0">

2.2、修改index.html的几行语句。

原文：

        <!-- 内容区域 -->
        <div class="content">
            <iframe src="/<?=SUBDIR?>?p=admin&c=index&a=home" frameborder="no"  name="panel"></iframe>
        </div>

修改后内容：

        <!-- 内容区域 -->
            <iframe src="/<?=SUBDIR?>?p=admin&c=index&a=home" frameborder="no" width=100% height=100% name="panel"></iframe>
  2.3、修改index.html的几行语句。

原文：

        <!-- 左侧导航 -->
        <div class="nav">

修改后内容：

        <!-- 顶部导航2 -->
        <div class="top-nav">

2.4、在后台layout.css里修改一行语句。

原文：

        body{height:100%;margin:0;background:#f5f5f5;font-family:Helvetica,Arial,sans-serif,simsun;font-size:22px;color:#676a6c;}

修改后内容：

        body{min-width:580px;height:100%;margin:0;background:#f5f5f5;font-family:Helvetica,Arial,sans-serif,simsun;font-size:22px;color:#676a6c;}

2.5、 在后台layout.css里增加几行语句。

        /* 顶部导航 */
        .top-nav{float:left;margin-right:15px;margin-top:0px;}
        .top-nav a{display:block;float:left;height:52px;color:#333;font-size:22px;border-bottom:3px solid #fff;margin:0 10px;padding:0 4px;line-height:53px;transition: all 0.25s ease-in;}

2.6、 在后台style.css里增加几行语句。 

        .container{max-width:1200px;margin:0 auto;}     

        /* 响应式 */
        @media screen and ( max-width:1250px){
        .box{width:530px;}
        .box-body{width:530px;}
        .wrap-course-edit .s-editor td{width:500px;}
        .m-pro-box-table{width:580px;}

        }

2.7、 在后台style.css里修改一行语句。 

原文：

         /*后台通用*/
        body{margin:0;background:#f5f5f5;font-family:Helvetica,Arial,sans-serif,simsun;font-size:18px;color:#676a6c;background-image:url('./bg.png');}

修改后内容：

        /*后台通用*/
        body{min-width:580px;margin:0;background:#f5f5f5;font-family:Helvetica,Arial,sans-serif,simsun;font-size:18px;color:#676a6c;background-image:url('./bg.png');}

2.8、在多个后台html文件里加入如下一行。

        <meta name="viewport" content="width=device-width" initial-scale=1.0">

2.9、在后台style.css里修改几行语句。将这几行语句里的字体改大，从14px改到22px。

例如如下两行：

        .box-title{border-bottom:solid #dfe4e7 1px;font-weight:bold;padding:15px;color:#555;font-size:22px;}
        .box-body{padding:15px 0px 0 0px;color:#555;font-size:22px;}

修改完成。效果比原来好了很多。当然，效果还不够好。需要继续修改。这里有几张在手机上截屏的图片。

后记：由于在手机端界面效果不够好，另外不好兼顾电脑端和手机端。因此打算以目前的显示界面为基础，通过复制加修改的方式再做一套手机端界面。