css3 特性之媒体查询

讲解bootstrap的cantainer的属性样式

   .cantainer{
      height:1000px;
      background-color:#f40;
    }
  
    .@media(min-width:768px){   //这里意思是当最小宽度
        .cantainer{
           width:750px;   
        }
    }
 .@media(min-width:992px){   //这里意思是当最小宽度
        .cantainer{
           width:970px;   
        }
    }
 .@media(min-width:1200px){   //这里意思是当最小宽度
        .cantainer{
           width:1170px;   
        }
    }

另外一种用法

 .@media(min-width:1200px)and(max-width:900px){   //这里意思是当最小宽度
        .cantainer{
           width:1170px;   
        }
    }

css奇偶选择器

/*sction部分*/
        section:nth-of-type(2n){  //选中所有偶数的section标签
            background: #888;
        }

        section:nth-of-type(2n+1){  //选中所有奇数的section标签
            background: #888;
        }

css通配符选择器

 /*字体图标*/
        @font-face {
            font-family: 'guzhenhua';
            src: url('./font/MiFie-Web-Font.eot') format('embedded-opentype'),
            url('./font/MiFie-Web-Font.svg') format('svg'),
            url('./font/MiFie-Web-Font.ttf') format('truetype'),
            url('./font/MiFie-Web-Font.woff') format('woff');
        }
        [class^="icon-"],
        [class*=" icon-"] {   //包含空格:意思是匹配多class的icon属性
            font-family: guzhenhua;
            font-style: normal;
        }

boostrap属性意思

规格: 
超小屏幕 手机 (<768px)    xs
小屏幕 平板 (≥768px)  sm
中等屏幕 桌面显示器 (≥992px) md
大屏幕 大桌面显示器 (≥1200px) lg

            
hidden-sm  在sm下隐藏 
visible-md   在md下显示