|
网站自适应，很多人都认为是很高级须要很多时间去实现的东西，不愿意去把一个现成的网站改成自适应，情愿独自另外做一个移动站。我之前认为实现网站自适应，要设计很多套CSS，并且要联合jQuery，来实现自适应不同的设备。我还认为要从新设计文章的图片，或许要用到JavaScript来掌握图片尺寸，因为图片过大就会超出手机屏幕，而这个工作量是十分恐怖的。种种顾忌使我始终不敢着手开刀，形成至今网站还只是一个PC版，而也没有多做一个移动版。
常常在群里看到大家都说移动流量怎样多怎样多，有的还说移动流量大大超过了PC流量，说移动流量的广告点击率也比PC流量高，潜移默化的作用，我也渐渐遭到了感染，于是抉择把网站改成自适应！
我为什么是把网站改为自适应，而不是改为一个独自的移动站？因为我想一劳百逸，不想同时维护PC站和移动站，这将为日后更新文章节省很多的时间。因为是第一次接触，没有事实经验，所以须要边找材料看案例边修改代码。令我认为十分意外的是，我居然仅需一天时间就实现了修改工作！
网站改为自适应有多简单？下面就说说如何把网页改为自适应吧，我为什么说很简单？因为你不须要任何高深的网页设计技术，你只须要懂一点html、一点css，而修改耗时关于一张普通网页来说，确凿只要几个小时。
我把全部修改过程分为两个步骤。
第一步，十分简单，把如下代码直接复制到里面。
"Cache-Control" content="no-transform" />
"Cache-Control" content="no-siteapp" />
"viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
后面两个meta，no－siteapp和no－transform，是告诉搜索引擎不要把网页转码。第三个meta，申明网页能够缩小放大。
第二步，在里加上如下css代码。
"text/css">
@media(max-width:960px)
{
}
这段css代码，意思是在屏幕宽度小于960px的时候执行的样式，当然你能够把960px改为其余更小的宽度，例如760px。
接下来，咱们要做的就是把那些不须要在手机网页上显示的内容隐藏掉。如何隐藏？这就须要看懂网页的html代码了，须要剖析每一个模块运用的div，例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div，而后，咱们就运用css隐藏不必显示的div，代码很简单，就是display：none。（本文由十堰网站建设公司整理发布，仅供大家参考学习！）
|
十堰企业老板，你之前做的PC网站怎么快速改成自适应网站
时间：2015-09-23 作者：百优科技