老鱼网一个爱分享的小站!分享一些站长相关知识资源文章!
云服务器推荐

首页好文推荐建站教程正文

四步教你怎么将纯PC网站改成三合一自适应网站

老鱼网7天前5

很多以前建的网站,当时只建了PC电脑站,没有做手机网站。用手机打开网站后,显示的仍然是PC端版面,用户体验比较差。那么有没有方法把一个PC网站改成适合电脑、手机、微信移动端三合一的自适应网站呢?

自适应网站

下面老鱼网就教你四步将一个纯PC网站改成自适应网站的方法。

第一步:在网站头部代码上添加以下的META代码。放在标签上面;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta Name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

第二步:引入移动端CSS样式文件wap.css,将以下的代码放在上面;

<link href='<?php echo get_template_directory_uri(); ?>/wap.css' type='text/css' rel='stylesheet' media='screen and (max-width:768px)'>

第三步:放上移动端导航按钮DIV;放在导航代码下面;

<div class="mb_bar"></div>

<script>
$(".mb_bar").click(function() {
$(".nav").toggle(200);
});
</script>

第四步:将下面的CSS样式代码粘贴到第二步的wap.css中,并且根据自己的网站样式进行调整。

.logo_img img {width: 86%; height: auto;}
.mb_bar {display: block;border: none;width: 40px;height: 40px;text-indent: -900em;overflow: hidden;position: absolute;top: 50px;right: 2%;cursor: pointer;outline: none;background: #525356 url(static/images/menu-button-bg.png) no-repeat center center;background-size: 50%;z-index: 99;border-radius: 5px;}
.nav ul li{width:25%;text-align:center;}
.nav ul li a{padding:0;}

.nav{display:none;position: absolute;z-index: 2;background: #fff;border-top: 1px solid #ddd;}
.index_focus{width:100%;height:200px; left:0;margin-left: 0;}
.index_focus img{width:100%;height:200px;}
.nav {margin-left: 0;margin-top: 10px;}

通过上面的几个步骤,就可以将一个纯PC网站转换成一个自适应网站了。


上一篇:zblog php调用指定tag文章列表的方法

下一篇:​6个月从权3到权重7,钉钉是怎么通过聚合快速提升网站权重的


转载声明:本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 侵删请致信E-mail:wwwlaoyuwang#126.com(#=@)

云服务器推荐