基础的响应式网页，CSS3写法案例

至从CSS3开始普及以来，网页的制作花样越来越多了，感觉还是学一些新知识比较好。然而对于响应式网页，虽然买了书籍也看了资料，但是因为没太多时间仔细专研，所以也没有太熟练，有时候敲代码还得看看书查查资料。所以，以下代码是简单整理，防止忘记，以后也可以随意参考，至少没必要每次就查书或者百度。

资料来源于“前端网”，用户ars_sam所发表的笔记

 body{
        padding: 0;
        margin: 0;
    }
    .title{
        display: none;
    }
    .container{
        background-color: #E9E9EC;
        text-align: center;
        margin: 0 auto;
        font-size: 20px;
    }
    /* PC或中大型笔记本设备 desktop */
    @media all and (min-width: 1201px) {
        .title-desktop{
            display: block !important;
        }
        .container {
            width: 1100px;
        }
    }
    /* 中小型笔记本或大平板 laptop */
    @media all and (min-width: 980px) and (max-width: 1200px) {
        .title-laptop{
            display: block !important;
        }
        .container {
            width: 920px;
        }
    }
    /* 中型平板或小型笔记本 tablet */
    @media all and (min-width: 768px) and (max-width: 979px) {
        .title-tablet{
            display: block !important;
        }
        .container {
            width: 720px;
        }
    }
    /* 手机或小平板 phone */
    @media all and (max-width: 767px) {
        .title-phone{
            display: block !important;
        }
        .container {
            width: 90%;
        }
    }