请注意HTML源文件里的一个判断语句：

　　在head里加入这条元标签，那移动浏览器中页面将以原始大小显示，并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性，避免网页混乱。

　　width - viewport的宽度 height - viewport的高度

　　initial-scale - 初始的缩放比例

　　minimum-scale - 允许用户缩放到的最小比例

　　maximum-scale - 允许用户缩放到的最大比例

　　user-scalable - 用户是否可以手动缩放

　　那么问题来了，如何让浏览器判断设备尺寸呢?

　　有两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件，弃用。原因是博客CSS文件不大代码也不多，不需要多个CSS文件，也能减少并发。

　　第二种就是我现在用的这种，请直接查看本站CSS文件，

　　核心代码来了，开始研究响应式web设计朋友，CSS3 Media Queries是入门。

　　在CSS中加入语句：

　　@media screen and (max-width: 600px) {

　　大家可以看到我博客里有多个判断，1024px，768px，650px，500px，400px，350px。

　　这意味着宽度在1024px以下的屏幕，我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性，同时也是图省事，下面六个CSS几乎相同。

　　唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。

　　这也是文章开头为什么pad和移动端显示的界面不同的原因之一。

　　要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

　　参考代码：

　　核心CSS文件，适用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

　　代码文件，鼠标右键查看本站源代码(注意导航代码的变化)，此代码仅供zblog用户参考。

　　图省事的、试用WP系统的朋友可直接下载张力博客提供的WordPress主题：http://zhangliseo.com/wp-didiao

　　使用asp版卢松松主题的朋友，可以直接把本站的CSS拿去用。

　　总结：

　　只要制作两个导航，能看懂CSS文件就可以搞定，照猫画虎，人人都能做出响应式的网页设计，看似很难，实际上很简单。

　　来源：卢松松博客(微信号/QQ号：13340454)

以上所分享的是关于响应式网页设计的快速教程（适合个人站），下面是编辑为你推荐的有价值的用户互动：

　　相关问题：用DreamWeaver做一个响应式网站

　　答：您好，这个可是难了，您看看下面的建议，能否对您有帮助： 1、首先我们看下什么是响应式网页设计。它为用户从他们的电脑切换到iPad、iPhone、黑莓、HTC、平板电脑等等，该网站能自动切换适应的分辨率，图像大小和脚本。换句话说，该网站能自动响... >>详细

　　相关问题：响应式网站设计和自适应的区别

　　答：通俗的说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。 响应式设计可以一个网站兼容多个不同终端 响应式网页设计优... >>详细

　　相关问题：如何快速的做响应式网站

　　答：精致华丽的设计风格 灵活巧妙的响应式设计 ，更加流畅、更讲究交互的响应式网页模板，正在高速进化。响应式设计革命正在悄悄发生，改变着整个网页设计的发展趋势。同时，优秀的响应式网页能够促使用户在页面停留更长的时间。快速的处理能力，足... >>详细