响应式布局

1. 创建响应式网格布局

　　首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

2. 媒体查询

　　@media only screen and (max-width: 500px) {
    　　body {
           　　margin: 0px;

　　　　　padding: 0px;

　　　　　color: rgb(170, 17, 17);

　　　　　font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;

　　　　　font-size: 13.2px;

　　　　　background: lightblue;
    　　}
　　}

3. 为移动端优先考虑

　　/* 为移动端设计: */
　　[class*="col-"] {
    　　width: 100%;
　　}
　　@media only screen and (min-width: 768px) {
    　　/* For desktop: */
    　　.col-1 {width: 8.33%;}
    　　.col-2 {width: 16.66%;}
    　　.col-3 {width: 25%;}
    　　.col-4 {width: 33.33%;}
    　　.col-5 {width: 41.66%;}
    　　.col-6 {width: 50%;}
    　　.col-7 {width: 58.33%;}
    　　.col-8 {width: 66.66%;}
    　　.col-9 {width: 75%;}
    　　.col-10 {width: 83.33%;}
    　　.col-11 {width: 91.66%;}
    　　.col-12 {width: 100%;}
　　}