制作一个PC网站响应式并没有你想象的那么难

以前我认为要实现网站响应式需要设计多套CSS并与jQuery结合才能实现对不同设备的适配。我想我需要重新设计文章的图像，或者使用JavaScript来控制图像大小，因为如果图像太大，就会超出手机屏幕，工作量非常可怕。种种顾虑让我无从下手。结果，该网站仍然只有PC版，没有手机版。

经常看到群里有人在谈论移动流量有多大。甚至有人说，移动端流量大大超过了PC端流量。他们表示，移动流量中的广告点击率也高于 PC 流量中的广告点击率。它对我有微妙的影响。我渐渐被感染了，所以我决定把网站改成自适应！

为什么我应该将网站更改为响应式网站，而不是将其更改为单独的移动网站？因为我想一劳永逸地搞定，不想同时维护PC端和移动端。这样会节省以后更新文章的大量时间。

由于这是我第一次接触，没有任何实践经验，所以我必须一边改代码一边查找资料、看案例。

令我惊讶的是，我只用了一天就完成了修改！我们先看一下我的更改结果：移动版网站，Google广告也出现在文章末尾。文末还有网友评论。用户仍然可以在手机上发表评论。另外，在“延伸阅读”之后，PC版的侧边栏中还显示了更多的栏目。文章列表，最后，百度移动的自适应广告被放置在页面末尾搜索框的颜色层上方。

使网站响应式有多容易？

让我们谈谈如何将您的网站更改为自适应。为什么我说这很容易呢？因为你不需要任何高级的网页设计技能，你只需要了解一些 HTML 和一些 CSS，对于一个普通的网站来说，转换时间实际上只有几个小时。

我将整个变更过程分为两步。

第一步非常简单。将以下代码直接复制到中。

前两个元，no-siteapp 和 ♸ no -transform 告诉搜索引擎不要重新编码网页。第三个元表示网页可以放大或缩小。

第二步，在中添加以下css代码。

@media(max-width:960px)
{

}
这是当屏幕宽度小于960px。当然，您可以将960px更改为其他更小的宽度，例如760px。

接下来我们要做的就是隐藏移动网站上不需要显示的内容。如何隐藏？这就需要你了解网页的html代码，分析各个模块所使用的div，如标题div、导航栏div、文本div、侧边栏div和div。在页脚中。接下来，我们使用CSS隐藏不显示的div。代码很简单，就是display:none。

例如网站结构如下图：

网站结构图

移动网站只需要显示文字，其他部分我们都隐藏。代码如下：

@media(max-width:960px)
{
/* 网站全屏视图*/♿❓ body {width :100%;}

/*全屏显示文字*/ ? -width:90%}

/* 隐藏页眉、导航、侧边栏、页脚*/
#divHead{display:none}
#divNav{display:none}{display: #ndivone }
#divBottom{display:none}
}

这样，当你在手机上浏览网页时，只会显示文字。

这就是网站定制的作用！

看完这个例子，是不是很简单呢？这就是网站定制的作用！

但是要从头到尾定制移动网站，您仍然需要编写一些额外的代码，例如为移动网站的页眉、导航和页脚编写 div。写入后会默认隐藏，然后在手机上显示。

网站结构如下图所示：

包含移动模块的网站结构

css可以这样写

/*移动标题默认隐藏标题、导航和底部文本*/
#divHead_mobile{display:none}
#divNav_mobile{display:none}
#divBottom_mobile♿ @display:none} media(max -宽度：960px）？ * 防止文字图片超过屏幕宽度 */
/* 文字图片的宽度最大为屏幕宽度的90% */
#divMain img{max-width:90% }

/* 隐藏页眉、导航、侧边栏、页脚*/
#divHead{display:none}
#divNav{display:none}
#divSide{display:none} #divBottom{显示: none}

/* 显示移动版页眉、导航和页脚*/
#divHead_mobile{display:block}
#divNav_mobile{display:block}_mobile:display: block}
}

这个时候你就可以定制一个漂亮的手机网站了。

看完这个例子，你是不是觉得自适应设计其实很简单？当然，这只是最基本的自适应设计，重点是引入思想。在这个思想的指导下，你可以完成更复杂的设计。