现如今，响应式设计愈发流行。有一个重要的原因便是，现在用手机、用平板上网的人越来越多了，所以站长们为了让访客有一个良好的上网体验，就会让网站根据对应的上网设备、对应的窗口尺寸显示不同但都很养眼的网页。
要用代码去实现它也是非常简单的一件事，下面我只挑最简单的代码，让大家感受下哈。
让网页根据窗口尺寸更改大小
比如我要那一个文章阅读的网页，这个文章正文是用一个容器所包含着：
<div id="read">
正文内容
</div>现在来设计这个容器的css样式，这里我就只设置一个宽度的属性：
#read{
width:690px;
}现在它只是一个普通的网页，窗口的区域并不会随着窗口尺寸大小的更改而更改，我们只要给它加上非常简单的代码，就能够实现流动式的窗口布局了：
@media screen and (max-width:690px){
#read{
width:100%;
}
}就这么简单，这句代码的意思便是当屏幕窗口尺寸小于690px时，id为read的这个容器的宽度便会为100%，也就是宽度随着窗口的尺寸更改而更改。
有图有真相，在以上的代码的基础上面，我做成了下面的一个网页，这个是浏览器窗口宽度超过690px时的画面：
下面这张便是我窗口尺寸缩小之后的显示情况了：
好了，我们现在来总结一下，只要写上以下的代码，就可以实现上面图片的效果了：
<div id="read">
正文内容
</div>
#read{
width:690px;
}
@media screen and (max-width:690px){
#read{
width:100%;
}
}另一种方法
下面这种方法代码量比较少一点，在实现简单效果时，显示的效果可谓是完全一样：
<div id="read">
正文内容
</div>
#read{
width:100%;
max-width:690px;
}大家注意到了区别没：
- width:100%;这句代码就是让容器的宽度一直保持和浏览器窗口一样的大小。
- max-width:690px;这句代码就是这个容器的最大宽度为690px，到了这个宽度之后，它的宽度便会一直保持下去，不再随浏览器窗口的变大而变大。
综上，实现上述效果，用以上两个代码都是可以的，第二个代码比较简洁一点，也是我最近才发现的，写在这里为以后做个笔记吧。
让网页在不同设备上正确显示
因为手机浏览器在浏览网页时，便会把整个网页的宽度擦在那么狭小的屏幕上面，这样显得非常的不合理，访客想要看时，还得放大了才能看得清楚文字。
这里我可能说的不是很清楚，就以下图为例吧：
上图的代码便是让网页随着浏览器窗口更改的代码，可以显示贴出来的效果还是以往的那么糟糕，那是因为这里少了一行代码，我们只需在网页的<head></head>标签之中，添加以下代码，便可以实现在不同设备方便浏览网页，手机也好，ipad也罢：
<meta name="viewport" content="width=device-width">什么意思本人也不是很清楚，大体就是让其他设备的尺寸按照电脑上来吧。
添加好了以上一行代码之后，在手机上面便会显示出心目中的效果啦：
这时只是说了一个非常皮毛的东西，不过这个是基础，一切的网页，想要响应式设计，必须会有这些代码的。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。