将PC网站变成自适应!原来是这么简单!

发布于:2018-02-12     来源:广州佰维网络     作者:陈大力     点击:
网站的适应性,很多人认为它是非常先进的,需要大量的时间来实现的东西,并不愿把现成的网站变成一个自适应的。我认为我有一个自适应的网站,我想设计很多CSS,我必须结合jQuery来实现自适应和不同的设备。我认为有必要重新设计文章的图片,或者使用JavaScript来控制图片的大小,因为图片会比手机屏幕大,而且工作量非常可怕。各种各样的顾虑让我不敢动刀,到目前为止,网站只是PC版,并不是更多的手机版。
将PC网站变成自适应!原来是这么简单!
经常在群里看到大家说移动流量有多大,也有人说移动流量大大超过PC流量,说手机广告点击率也比PC流量高,影响大,我慢慢被感染了,决定把你的站点改成自适应!

为什么我要改变网站,而不是一个单一的移动站自适应?因为我想工作一百易,也不想维护PC站和移动站,这将节省很多时间更新后的一天。

因为它是第一次接触,没有实践经验,所以我们需要查找信息来查看案例并修改代码。

我很惊讶我花了一天时间完成这项工作。

先看一下我的复习结果。
将PC网站变成自适应!原来是这么简单!
此图显示的内容,手机版的影响比较小,事实上,页面的手机版,在文章的最后还显示谷歌广告,在文章的最后,还有用户留言,用户还可以发表评论,另外在手机上,,“延伸阅读”背后的侧边栏显示在电脑名单几列,最后在网页端,搜索框上面着色层推出百度移动自适应广告。

网站易于适应吗?

以下是如何将Web变成自适应的。为什么我说它很简单吗?因为你不需要任何高级的网页设计技术,你只需要知道一点HTML和一点CSS,而修改时间只需要一个普通的网页几个小时。
将PC网站变成自适应!原来是这么简单!

我把整个过程分成两个步骤。


第一步,非常简单,把如下代码直接复制到<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>
css就可以这样写

<style type="text/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}
}
</style>

此时,您可以自适应地设计漂亮的移动页面。

看看这个例子,你认为自适应设计实际上很容易吗?当然,这只是最基本的自适应设计,重点是引入思想,你可以在这个思想的指导下做更复杂的设计。


文章出自:​-佰维网络 http://www.100vic.com 如转载请注明出处!


上一篇:自适应网站设计对百度友好的关键:添加applicable-device标签

下一篇:你如何让一个自适应的网页?

最新资讯
MORE

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。