响应式布局的简单实现

什么是响应式布局

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
在不同的设备上，通过响应式布局，我们能够获得更好的页面阅读体验。

响应式布局的实现

禁止初始的页面缩放

在head标签内加入meta：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

设置不同宽度下的样式

/** 全局css **/
.body {
    background:red;
}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .head {
        background:green;
    }
}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .head {
        background:blue;
    }
}

基本上就是这样的一个原理，随便弄弄也算是让自己的小blog适应手机和pad的阅读了。本身不是前端
遇到问题还是比较蒙逼的，以后对这方面也要加强了解。