快速吧pc端网页自适应怎么实现?
网站改为自适应有多简单?
下面就说说如何把网页改为自适应吧,我为什么说很简单?因为你不需要任何高深的网页设计技术,你只需要懂一点html、一点css,而修改耗时对于一张普通网页来说,确实只需几个小时。
我把整个改动过程分为两个步骤。
第一步,非常简单,把如下代码直接复制到里面。
PHP
</meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" >
</meta http-equiv="cache-control" content="no-siteapp" >
</meta http-equiv="cache-control" content="no-transform" >
前面两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。第三个meta,声明网页可以缩小放大。
第二步,在里加上如下css代码。
@media(max-width:960px) { }
这段css代码,意思是在屏幕宽度小于960px的时候执行的样式,当然你可以把960px改为其他更小的宽度,例如760px。
接下来,我们要做的就是把那些不需要在手机网页上显示的内容隐藏掉。如何隐藏?这就需要看懂网页的html代码了,需要分析每一个模块使用的div,例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div,然后,我们就使用css隐藏不用显示的div,代码很简单,就是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} }
至此,你就可以自适应设计出一个漂亮的手机版页面了。
免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.ziyuangou.cc",如遇到无法解压的请联系管理员!
范文吧 » 快速吧pc端网页自适应怎么实现?