• Z-Blog PHP主题模板制作十五:响应式调整/手机平板自适应模式

    1年前 (2017/04/27) 孤狼 技巧 829 浏览 1 条评论

    制作一个响应式模板,我们可以直接用别人做好的响应式框架,然后再调用CSS样式就可以实现,但这需要是熟悉框架布局和CSS样式,非常麻烦,而且CSS样式太多太杂不易上手。在这里孤狼是自己调整的响应式布局,非常简单,只是多费一点时间就能实现。我们要在不同分辨率终端上打开,仔细查看,哪需要调整,还有哪需要修改。


    下面是孤狼制作好的响应式css代码,

    @media screen and (max-width:1330px) {
    	.wrapper {
    	max-width:98%;
    }
    .input-t input[type="text"] {
    	width:30%;
    }
    }
    @media screen and (max-width:1074px) {
    	.center {
    	margin-right:250px;
    	margin-left:190px;
    	padding-top:12px;
    	padding-right:12px;
    	padding-left:12px;
    }
    .sidebar {
    	width:250px;
    	float:right;
    	margin-left:-250px;
    	padding-top:12px;
    }
    .widget {
    	padding:10px;
    	margin-bottom:12px;
    }
    .istop {
    	margin-bottom:12px;
    }
    .list {
    	margin-bottom:12px;
    }
    .pagebar,.center-c,.comments {
    	padding:10px;
    	margin-bottom:12px;
    }
    .copyRight,.tags,.navigation {
    	margin-top:12px;
    }
    .list-l {
    	padding:8px 10px 8px 10px;
    }
    .list-content {
    	padding:10px;
    }
    .list-content a {
    	font-size:14px;
    	line-height:20px;
    }
    .list-img {
    	height:180px;
    }
    .list-title a {
    	font-size:18px;
    	line-height:20px;
    }
    .divCatalog li {
    	width:113px;
    }
    .widget input[type="text"] {
    	width:180px;
    }
    .divStatistics li,.divMisc li,.divAuthors li {
    	width:100%;
    	text-align:left;
    }
    .content img {
    	box-shadow:2px 2px 3px #888;
    	height:auto;
    }
    .input-t input[type="text"] {
    	width:95%;
    }
    .Blogfooter {
    	margin-right:260px;
    	margin-left:200px;
    	padding-bottom:10px;
    }
    }
    @media screen and (max-width:900px) {
    	.menu {
    	background:#F39801;
    	display:block;
    	margin-top:10px;
    }
    .menu a {
    	display:block;
    	cursor:pointer;
    	line-height:40px;
    	text-align:center;
    	font-size:20px;
    	font-weight:bold;
    	text-shadow:0 0 3px #fff;
    }
    .header {
    	background:#f9f9f9;
    	width:100%;
    	height:100%;
    	position:relative;
    }
    .logo {
    	height:100px;
    	width:auto;
    }
    .logo samp {
    	height:auto;
    	overflow:auto;
    }
    .search {
    	width:auto;
    }
    .search span {
    	width:85%;
    }
    .search-text {
    	width:100%;
    }
    .nav {
    	display:none;
    }
    .nav ul {
    	width:auto;
    }
    .nav ul li {
    	background:#f4f4f4;
    	width:auto;
    	height:auto;
    	margin-bottom:10px;
    	border-bottom:solid 2px #26A6F2;
    }
    .nav ul li a {
    	padding-left:10px;
    	text-shadow:0 0 3px #fff;
    	color:#444;
    }
    .nav ul li:hover {
    	background:#ddd;
    	border-bottom:solid 2px #F39801;
    }
    .nav ul ul {
    	margin:0;
    	opacity:1;
    	visibility:visible;
    	left:auto;
    	z-index:1;
    	transition:all .2s ease-in-out;
    	position:relative;
    	box-shadow:0px 0px 0px #ddd;
    }
    .nav ul li:hover > ul {
    	background:#f6f6f6;
    	opacity:1;
    	visibility:visible;
    	margin:0;
    	border-bottom:solid 1px #ddd;
    }
    .nav li li {
    	height:30px;
    	border-bottom:solid 0px #ddd;
    	border-top:solid 1px #ddd;
    	margin-bottom:0px;
    	padding-left:30px;
    }
    .nav li li a {
    	font-size:16px;
    	line-height:30px;
    }
    .center {
    	margin-left:0px;
    	padding-left:3px;
    }
    .input-t input[type="text"] {
    	width:95%;
    }
    .Blogfooter {
    	margin-left:0px;
    }
    }
    @media screen and (max-width:700px) {
    	.center {
    	margin-right:0px;
    	padding-right:3px;
    }
    .sidebar {
    	display:none;
    }
    .list-img {
    	height:250px;
    }
    .copyRight img {
    	display:none;
    }
    .input-t input[type="text"] {
    	width:95%;
    }
    .Blogfooter {
    	margin-right:0px;
    }
    }
    @media screen and (max-width:400px) {
    	.list-img {
    	height:180px;
    }
    .input-t input[type="text"] {
    	width:95%;
    }
    .comments h3 {
    	font-size:15px;
    }
    }@media screen and (max-width:320px) {
    	.list-img {
    	height:150px;
    }
    .comments h3 {
    	font-size:14px;
    }
    }



    /*菜单*/
    	$(".menu").click(function(){
    	$(".nav").slideToggle("slow");
    return false;
    });
    
    /*反回顶部*/
        $('.top').click(function() {
            $('html,body').animate({
                scrollTop: '0px'
            }, 800)
        });

    ——同时新建一个zbgl.js放在主题文件夹下面的script文件夹里面,以下是zbgl.js使用代码。



    在index.php、single.php、search.php中加入以下代码。

    <div class="menu" id="#"><a href="#" title="点击弹开">导航菜单</a></div>


    <script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/zbgl.js"></script>

    ——在footer.php文件</body></html>上加入以下代码。

    版权属于:孤狼备忘录     本文作者:孤狼

    原文地址: https://www.glbwl.com/z-blog-php-theme-em.html

    版权声明:转载时必须以链接形式注明原始出处及本声明。

    « 上一篇:Z-Blog PHP主题模板制作十四:错误页面404.php » 下一篇:Z-Blog PHP主题模板制作十六:导出主题为.zba文件

    推荐阅读

  • 折腾Z-BlogPHP主题模板zbgl/GitHub下载(添加侧栏功能修改手机显示样式)
  • Z-Blog PHP主题模板制作十六:导出主题为.zba文件
  • Z-Blog PHP主题模板制作十四:错误页面404.php
  • Z-Blog PHP主题模板制作十三:自定义搜索页面search.php
  • Z-Blog PHP主题模板制作十二:尾部文件footer.php
  • 已有1条留言

    • 压力机  2017-04-28 13:34:02 回复该评论
      您好,您的网站做的很不错,很漂亮,我已经收藏了,方便我随时访问.

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。