你的位置 > 网站首页 > 技术文章 > 快速把PC版网站改为自适应开发手册2017版

快速把PC版网站改为自适应开发手册2017版

我把整个改动过程分为两个步骤。


第一步,非常简单,把如下代码直接复制到<head></head>里面。


<meta http-equiv="Cache-Control" content="no-transform" /> 

<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />


前面两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。第三个meta,声明网页可以缩小放大。


第二步,在<head></head>里加上如下css代码。


<style type="text/css"> 

@media(max-width:960px)

{

  

}

</style>


这段css代码,意思是在屏幕宽度小于960px的时候执行的样式,当然你可以把960px改为其他更小的宽度,例如760px。


接下来,我们要做的就是把那些不需要在手机网页上显示的内容隐藏掉。如何隐藏?这就需要看懂网页的html代码了,需要分析每一个模块使用的div,例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div,然后,我们就使用css隐藏不用显示的div,代码很简单,就是display:none。


手机网页只需显示正文,我们把其他部分全部隐藏,代码如下:


<style type="text/css"> 

@media(max-width:960px)

{

     /* 网页全屏显示 */

    body {width:100%;} 


    /* 正文全屏显示 */

    #divMain{width:100%} 


    /* 为了避免正文图片超出屏幕宽度 */

    /* 正文图片宽度最多是屏幕宽度的90% */

    #divMain img{max-width:90%} 


    /* 隐藏头部、导航、侧栏、页脚 */

    #divHead{display:none}

    #divNav{display:none}

    #divSide{display:none}

    #divBottom{display:none}

}

</style>


这样,当在手机浏览网页时,就只显示正文了。


快速仿站

Hi, 欢迎加入NAZ.CN技术交流群,带你装逼带你飞!

我要入群