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

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

下面学做网站论坛就教你四步将一个纯PC网站改成自适应网站的方法。

第一步：在网站头部代码上添加以下的META代码。放在</head>标签上面；

<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，将以下的代码放在</head>上面；

<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网站转换成三合一的自适应网站了。