一天完成把PC网站改为自顺应!原本这么简朴!

网站自顺应,许多人都以为是很高级必要许多时刻去实现的对象,不肯意去把一个现成的网站改成自顺应,甘愿单独其它做一个移动站。我之前认为实现网站自顺应,要计划许多套CSS,而且要团结jQuery,来实现自顺应差异的装备。我还觉得要从头计划文章的图片,可能要用到JavaScript来节制图片尺寸,由于图片过大就会超脱手机屏幕,而这个事变量长短常可骇的。各种记挂使我一向不敢着手开刀,造成至今网站还只是一个PC版,而也没有多做一个移动版。

常常在群里看到各人都说移动流量怎么多怎么多,有的还说移动流量大大高出了PC流量,说移动流量的告白点击率也比PC流量高,潜移默化的浸染,我也逐步受到了传染,于是抉择把网站改成自顺应!

我为什么是把网站改为自顺应,而不是改为一个单独的移动站?由于我想一劳百逸,不想同时维护PC站和移动站,这将为日后更新文章节减大量的时刻。

因为是第一次打仗,没有现实履历,以是必要边找资料看案例边修改代码。

令我感想很是不测的是,我竟然仅需一天时刻就完成了修改事变!

先看看我的修改成就吧

PC版网页

PC版网页

PC版网页

手机版网页

手机版网页

手机版网页

此手机版结果图表现的内容较量少,究竟上,手机版网页中,在文章末了也表现Google告白,文章末了尚有效户留言,用户照样可以在手机上评述,另外,“扩展阅读”后头还表现了PC版中的侧栏几个栏目标文章列表,最后,在页尾的搜刮框着色层上方投放了百度移动的自顺应告白。

网站改为自顺应有多简朴?

下面就说说怎样把网页改为自顺应吧,我为什么说很简朴?由于你不必要任何高妙的网页计划技能,你只必要懂一点html、一点css,而修改耗时对付一张平凡网页来说,千赢电子游戏平台,确实只需几个小时。

我把整个窜改进程分为两个步调。

第一步,很是简朴,把如下代码直接复制到<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-siteappno-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>

这样,当在手机赏识网页时,就只表现正文了。

网页自顺应就是这样做的!

看了这个实例,是不是很简朴?网页自顺应就是这样做的!

Copyright © 2020 千赢体育娱乐餐饮加盟有限公司 All rights reserved 站点地图