零基础学做网站培训介绍

当前位置:

四步教你怎么将纯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网站转换成一个自适应网站了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 对于以前建的独立的PC网站,怎么将快速改为自适应网站呢?有以下几种方法: 单独制作手机网站版面,然后使用代码进行判断PC端还是手机端; 根
  • 自适应网站是什么 图文教程 (19263 次浏览)
    自适应网站是指一个网站拥有多个版面,当用户使用PC电脑浏览网站时,显示PC版面,使用平板电脑浏览时,显示平板版面,使用手机浏览网站时,显示手机版