前面我已经在马海祥博客上跟大家详细介绍了《什么是响应式网页设计？》《响应式网页布局的实现方法原理》，接下来我要为大家分享的就是如何来做一个简单的响应式网页？

总体来说，响应式网页设计是一种新的网页设计思路，我们需要满足不同设备下的浏览模式，达到俱佳的体验效果。所以要想做好一个响应式网页，首先必须要满足桌面各个浏览器版本下正常显示页面。其次才考虑以webkit为内核的手机终端浏览器效果。由于IOS和Android浏览器都是webkit内核的，这里的响应我们暂时就不考虑ie9以下版本的浏览器了。

我们先以相对比较简单的博客网站（比如：）类型为例，它默认一个固定宽度为980px的网页，当浏览器窗口比980px小的时候，这个布局就变为100%比宽度的液态布局，而不是固定宽度。当浏览器窗口再缩小于700px的时候，我们就隐藏侧边栏。当窗口小于480px的时候，横向导航条隐藏，换成点击下拉效果的导航条。

3、媒介查询-MediaQueries

在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询mediaqueries这个css的设计思路。这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。外贸网站营销可以说是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。这样可以减少页面的高度。

（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：

其实在480px宽度下的时候，整体框架布局已经不用设置，外贸网站如何推广马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：

这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

最后我想再说的一点是关于弹性图片，我们这里用到的是img{max-width:100%;}。但是有个问题，如果图片过大会影响其加载速度，更会造成对存储空间的浪费。当然，这里有个响应式图片的实现技术思路，大家有兴趣的话可以查看《响应式网页布局的实现方法原理》一文。

本文为马海祥博客原创文章，如想转载，请注明原文网址摘自于，注明出处；否则，禁止转载；谢谢配合！网页设计如何制作一个响应式网页？。