PC⽹站改为⾃适应！原来这么简单！
第⼀步，⾮常简单，把如下代码直接复制到⾥⾯。
no-transform，是告诉搜索引擎不要把⽹页转码。第三个meta，声明⽹页可以缩⼩放⼤。
前⾯两个meta，no-siteapp
no-siteapp和no-transform
第⼆步，在⾥加上如下css代码。
@media(max-width:960px)
{
}
960px改为其他更⼩的宽度，例如760px
760px。
960px的时候执⾏的样式，当然你可以把960px
这段css代码，意思是在屏幕宽度⼩于960px
接下来，我们要做的就是把那些不需要在⼿机⽹页上显⽰的内容隐藏掉。如何隐藏？这就需要看懂⽹页的html代码了，需要分析每⼀个模块使⽤的div，例如头部的div、导航栏的div、正⽂的div、侧栏的div、页脚的div，然后，我们就使⽤css隐藏不⽤显⽰的div，代码很简单，就display:none。
是display:none
举例说明，⽐如⽹页结构如下图所⽰：
⽹页结构图
⼿机⽹页只需显⽰正⽂，我们把其他部分全部隐藏，代码如下：
@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}
}
这样，当在⼿机浏览⽹页时，就只显⽰正⽂了。
⽹页⾃适应就是这样做的！
看了这个实例，是不是很简单？⽹页⾃适应就是这样做的！
不过要把⼿机⽹页⾃适应得有头有尾，你还需要补充编写⼀些代码，例如编写针对⼿机⽹页的头部、导航和页脚的div，编写后默认为隐藏，在⼿机⾥再显⽰。
如下图所⽰⽹页结构：
包含⼿机模块的⽹页结构
css就可以这样写
/*默认隐藏⼿机版头部、导航和页脚*/
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile{display:none}
@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}
/*显⽰⼿机版头部、导航和页脚*/
#divHead_mobile{display:block}
#divNav_mobile{display:block}
#divBottom_mobile{display:block}
}
⾄此，你就可以⾃适应设计出⼀个漂亮的⼿机版页⾯了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。