美文网首页
css3 特性之媒体查询

css3 特性之媒体查询

作者: info_gu | 来源:发表于2017-04-09 21:50 被阅读0次

讲解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下显示

相关文章

  • IE8 兼容性处理

    Doctype Meta 媒体查询支持 Respond.js CSS3 支持 CSS3 PIE,它支持的特性有这些...

  • CSS3中的媒体查询

    一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性(width、height等)设置特定的css样...

  • CSS 响应设计-媒体查询

    1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询...

  • css3 特性之媒体查询

    讲解bootstrap的cantainer的属性样式 另外一种用法 css奇偶选择器 css通配符选择器 boos...

  • 浅谈CSS3 响应式布局--Media Queries

    CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义...

  • CSS3 媒体查询

    1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,C...

  • CSS3响应式开发

    CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3...

  • Media queries

    CSS3提供了多种媒体查询的方式 通过dpi

  • 媒体查询

    媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。 使用 媒体查询有...

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

网友评论

      本文标题:css3 特性之媒体查询

      本文链接:https://www.haomeiwen.com/subject/locjattx.html