简单代码就能实现响应式设计

2014-01-04 本文已影响8720人力气强

现如今，响应式设计愈发流行。有一个重要的原因便是，现在用手机、用平板上网的人越来越多了，所以为了让访客有一个良好的上网体验，就会让网站根据对应的上网设备、对应的窗口尺寸显示适配的网页。

实现响应式的核心代码很简单，下面就最重要的几点进行讲解。

让网页根据窗口尺寸更改大小

比如很普遍的文章页面，这个文章正文是用一个容器所包含着：

<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;
}

大家注意到了区别没：

手机浏览器在浏览网页时，会默认将整个网页的宽度缩在比较小的屏幕上面，如果为PC端页面，字体便会变得很小，用户体验很差。

此时便需要通过在<head></head>标签内声明以下代码：

<meta name="viewport" content="width=device-width">

再加上上面两点实现响应式的具体方法，便可实现在不同设备上适配的网页。

此教程为基础中的基础，大神轻喷。