为了方便在手机上游览及操作,最近给单商家版电商网站源码增加响应式布局。
先给前台添加响应式布局,然后给后台添加响应式布局。
一、给前台添加响应式布局
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;}
修改完成。效果比原来好了很多。当然,效果还不够好。需要继续修改。这里有几张在手机上截屏的图片。
后记:由于在手机端界面效果不够好,另外不好兼顾电脑端和手机端。因此打算以目前的显示界面为基础,通过复制加修改的方式再做一套手机端界面。