现如今，响应式设计愈发流行。有一个重要的原因便是，现在用手机、用平板上网的人越来越多了，所以为了让访客有一个良好的上网体验，就会让网站根据对应的上网设备、对应的窗口尺寸显示适配的网页。
实现响应式的核心代码很简单，下面就最重要的几点进行讲解。
让网页根据窗口尺寸更改大小
比如很普遍的文章页面，这个文章正文是用一个容器所包含着：
<div id="read">
正文内容
</div>
现在来设计这个容器的css样式，这里我就只设置一个宽度的属性：
#read{
width:690px;
}
现在它只是一个普通的网页，窗口的区域并不会随着窗口尺寸大小的更改而更改，我们只要给它加上非常简单的代码，就能够实现流动式的窗口布局了：
@media screen and (max-width:690px){
#read{
width:100%;
}
}
这句代码的意思是：当浏览器窗口尺寸小于690px时，id为read的这个容器的宽度便会为100%，也就是宽度随着浏览器窗口的尺寸更改而更改。
响应式设计代码方法二
下面这种方法代码量比较少一点，在实现简单效果时，显示的效果可谓是完全一样：
<div id="read">
正文内容
</div>
#read{
width:100%;
max-width:690px;
}
大家注意到了区别没：
- width:100%;这句代码就是让容器的宽度一直保持和浏览器窗口一样的大小。
- max-width:690px;这句代码就是这个容器的最大宽度为690px，到了这个宽度之后，它的宽度便会一直保持下去，不再随浏览器窗口的变大而变大。
在手机或平板上适配的前提代码
手机浏览器在浏览网页时，会默认将整个网页的宽度缩在比较小的屏幕上面，如果为PC端页面，字体便会变得很小，用户体验很差。
此时便需要通过在<head></head>标签内声明以下代码：
<meta name="viewport" content="width=device-width">
再加上上面两点实现响应式的具体方法，便可实现在不同设备上适配的网页。
此教程为基础中的基础，大神轻喷。
网友评论