随着移动互联网成为主流，智能手机的使用人数每年都在暴涨。如果网站制作只做了pc版，那么将无法适应市场宣传的进度。只有制作h5响应式网站，才能在手机上轻松浏览网站。
但是之前网站制作只做了pc版网站，现在怎么把pc版改版成h5响应式网站呢？
要实现网站h5响应式，需要设计很多套CSS，并且要结合jQuery，来实现网站h5响应式不同的终端访问设备（pc、平板、手机等设备）。
现在来分享下实际改版过程：
（1）在所有模板的头部代码
<head></head>
之间，加入以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="applicable-device" content="pc,mobile" />
上述第1行代码，声明网页可以缩小放大。
上述第2行代码和第3行代码，是告诉搜索引擎不要把网页转码。
上述第4行代码，是告诉搜索引擎这是一个h5响应式网页。
（2）新建一个main.css文件，并在所有模板的头部代码
<head></head>
之间引入以下代码：
<link href="main.css" rel="stylesheet">
并在main.css文件里面加入类似以下@media查询代码（仅供参考）：
@media (min-width: 320px) {
.top {
width:98%;
}
}
@media (min-width: 768px) {
.top {
width:96%;
}
}
@media (min-width: 992px) {
.top {
width:94%;
}
}
@media (min-width: 1200px) {
.top {
width:92%;
}
}上述这些代码的意思是指屏幕宽度大于等于320px、768px、992px、1200px的时候，分别要执行的css样式。通过css样式可以改变网页的布局，也可以显示和隐藏某些版块。
比如屏幕宽度大于等于1200px的时候，隐藏class=“bottom”的版块，则css代码可以这样写：
@media (min-width: 1200px) {
.bottom {
display:none;
}
}按照这种模式，写好网站里所有版块的css样式即可。
上述这些也只是一个大体的思路，完成一整个pc版网站的改版，需要写几百、几千，甚至几万行代码。希望本文的改版思路能给您指引，助您把pc版改版成h5响应式网站。
您已成功复制微信号
leishi010
打开微信添加好友？
确定
