布局类别

1.固定网页布局：设置固定宽度，px为单位。常见PC端页面。

2.流式布局+伸缩布局+rem+媒体查询：设置相对宽度，%为单位。适配移动页面。

3.响应式布局：检测设备信息决定布局方式。一般通过检测设备的宽度。适合结构简单的页面。（比如公司宣传页面、个人博客）

4.栅格化布局：css框架Bootstrap。通常%为单位。

（一）实现

利用媒体查询，检测不同设备。

常见屏幕大小尺寸：

大屏幕: 大于等于1200px(min-width: 1200px) PC端

默认:   小于等于980px(max-width: 980px)

平板:    大于等于768px(min-width: 768px)

手机:    小于等于480px(max-width: 414px)

代码举栗：

/* 默认是大屏幕 */

        body {

            background: red;

        }

        /* 屏幕宽度为768px~980px时 */

        @media screen and (max-width:980px) and (min-width:768px) {

            body {

                background: blue;

            }

        }

        /* 屏幕宽度小于768px时 */

        @media screen and (max-width:768px) {

            body {

                background: green;

            }

        }