一个pc端网站怎么转变成h5响应式版使用？

pc端网站在手机上浏览非常的不方便，文字很小也看不清楚。把一个pc端网站转变成h5响应式版本后，才可以在pc、平板、手机、微信等终端里面完美浏览，提升用户体验度，进一步提高咨询转化率。

既然知道了h5响应式版网站的好处，也迫切的想做，那么，到底一个pc端网站怎么转变成h5响应式版使用呢？

其实h5响应式版就是针对不同的访问终端，显示不同的页面。

访问终端有以下三种：

（1）pc端；

（2）平板端；

（3）手机端。

既然pc端网站已经有了，那么就只要在pc端网站的基础上，增加平板端和手机端即可。

增加平板端和手机端，就一定要用到@media查询，它可以针对不同的媒体类型（包括pc显示器、平板pc、手机等）设置不同的css样式规则。有了不同的css样式后，就会展现不同的网站页面。

@media查询代码举例如下：

@media (min-width: 320px) {
    .header {
        width:100%;
    }
}
@media (min-width: 540px) {
    .header {
        width:98%;
    }
}
@media (min-width: 768px) {
    .header {
        width:96%;
    }
}
@media (min-width: 992px) {
    .header {
        width:94%;
    }
}
@media (min-width: 1200px) {
    .header {
        width:92%;
    }
}

如果是一位经验丰富的前端网页工程师，就能熟练的使用@media查询代码，那么把一个pc端网站转变成h5响应式版，就是比较容易的一件事情了。