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

频道:技巧 日期: 浏览:1566

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

有问题需要 远程 的,可以联系孤狼,远程 20元 一次。(注:不精调,有时间才能远程)

孤狼QQ:642062966

孤狼备忘录-收费群(2元):633458183

孤狼备忘录-VIP群:906740730 验证信息请输入(用户名)