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

时间:1年前 (2017-04-27) › 阅读:1047

制作一个响应式模板,我们可以直接用别人做好的响应式框架,然后再调用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>上加入以下代码。

1条留言

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

发表评论:

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