很多以前建的网站，当时只建了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，将以下的代码放在</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网站转换成一个自适应网站了。

延伸阅读

• 小程序名字修改的技巧规则

  我们都知道名字的意义，名称作为陌生人最先的认知，在物质喧嚣的时代，如何从众多名称中脱颖而出给陌人生留下一个良好且深刻的印象，这至关重要。随着小程序开发越来越多，运营者在给小程序...

• 小程序商城怎么运营？

  小程序商城在当今电商领域日益受到瞩目，成功运营这样一个平台对于每个经营者而言都至关重要。那么，我们该如何着手呢?一、确立品牌方向首先，我们要清晰地定义自己的品牌在市场中的位置。...

• 自建商城运营秘籍，吸引顾客有妙招！

  新建网站的运营与维护之道一、明确核心产品的市场定位要让新建的商城网站在竞争激烈的市场中脱颖而出，关键在于精准地定位核心产品。选择具有市场潜力的热销产品，并突出其独特之处，是吸引...

• 小程序商城推广完全指南

  随着小程序商城的日益兴起，如何在竞争激烈的市场中脱颖而出成为了关键。小程序商城的推广方式多种多样，以下是一些有效的策略：1.公众号与小程序的结合：商家可以将小程序与公众号绑定，...

• 推广引流方法有哪些，裂变营销什么意思

  推广引流方法有哪些，裂变营销什么意思除了各公域平台，另一个比较重要的引流场景，就是在微信中。一方面做信社交性强，对于身边用友的链接更紧密，微信上也会以群、公众号的形式聚集一群有...