资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS3媒体查询响应式布局bootstrap框架的使用

这篇文章主要介绍CSS3媒体查询响应式布局bootstrap框架的使用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务大安市,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

媒体设备类型使用详解：




    
    Document
    
    
    

    
    
        h2{
            color:red;
        }
    

    
    
        h2{
            color:green;
        }
    

    
    
        h2{
            font-weight:normal;
        }
    


  
cyy

使用link标签设置媒体类型：




    
    Document
    
    
    

    
    
    
    


  
cyy

使用@import简化页面多文件引用：

这是推荐的做法：




    
    Document
    
    
    

    


  
cyy

style.css

@import url(common.css);
@import url(screen.css) screen;
@import url(print.css) print;

样式表中使用@media局部定义响应查询：




    
    Document
    
    
    

    


  
      cyy
      
    
          
  • cyy1
    • 
          
  • cyy2
    • 
          
  • cyy3
    • 
      

  

相关less

.navbar{
  height:60px;
  width:900px;
  display:flex;
  align-items:center;
  background:#f3f3f3;
  margin:0 auto;

  ul{
    list-style:none;
    display:flex;
  }
}

@media screen and (max-width:600px){
  .navbar{
    ul{
      display:none;
    }
  }
}

and条件判断响应式应用：




    
    Document
    
    
    

    
        h2{
            color:red;
        }
    


    h2{
        color:blue;
    }



  
CYY

逻辑或使用技巧操作：




    
    Document
    
    
    

    
    
        h2{
            color:red;
        }
    



  
CYY

not关键词使用注意要点：




    
    Document
    
    
    

    
    



  
CYY

使用only排除低端浏览器：




    
    Document
    
    
    

    
    



  
CYY

实战案例操作之文件结构：

html




    
    Document
    
    
    

    



  
      
        
            CYY
            
            
            
                
                    
  • 系统学习
    • 
                    
  • 实战课程
    • 
                    
  • 话题讨论
    • 
                    
  • 签到打卡
    • 
                
                
                    登录
                    注册
                
                
                                                                                             

    最新更新

                                                                                   
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                         
  •                             cyy开始学习响应式布局                             2020-11-13                         
    •                                                                                                     <                         1                         2                         3                         4                         5                         >                                                                                                                        

    社区小帖

                                                                                 

    引入统一控制的style.css

    @import url(common.css);
@import url(navbar.css);
@import url(card.css);
@import url(title.css);
@import url(page.css);
@import url(margin.css);
@import url(list-group.css);
@import url(small-x.css) only screen and (max-width:768px);
@import url(small.css) only screen and (min-width:768px);
@import url(medium.css) only screen and (min-width:960px);
@import url(big.css) only screen and (min-width:1200px);

    导航组件navbar.less

    header{
  border-bottom:5px solid #009688;
  box-shadow:0 5px 5px rgba(0,0,0,.2);

  .navbar{
    display:flex;
    padding:1rem 0;
    align-items:center;

    .logo{
      color:#009688;
      margin-right:20px;
      font-weight:bold;
      font-size:1.3rem;

      &+label{
        display:none;

        &+input{
          display:none;
        }

      }
    }

    .collapse{
      display:flex;
      flex-grow:1;

      .links{
        display:flex;
        // 占满剩余空间
        margin-right:auto;

        li{
          margin:0 10px;

          a{
            color:#777;
            
  
            &:hover{
              color:#333;
              font-weight:bold;
            }
          }
        }
        
      }

      .form{
        a{
          border:1px solid #009688;
          color:#009688;
          padding:.3rem 1rem;
          border-radius:.3rem;

          &.form-bg{
            background:#009688;
            color:white;
          }
        }
      }
    }
  }
}

@media screen and (max-width:960px){
  header{
    .navbar{
      // flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
      flex-flow:row wrap;

      .logo{
        margin-right:auto;

        &+label{
          display:block;
          border:1px solid #ddd;
          padding:.5rem 1rem;
          color:#555;
          cursor:pointer;

          &+input{
            display:none;
          }

          &+input:checked{
            &+.collapse{
              display:block;
            }
          }
        }
      }
      .collapse{
        display:none;
        flex-flow:column;
        width:100%;

        .links{
          flex-direction:column;
          margin-bottom:1.5rem;

          li{
            margin:.5rem 0;
          }
        }
      }
    }
  }
}

    卡片组件card.less

    .card{
  border:1px solid #ddd;
  box-shadow:0 0 5px rgba(0,0,0,.1);
  border-radius:.2rem;

  .card-header{
    padding:.5rem 1rem;
    border-bottom:1px solid #ddd;
  }
  .card-body{
    padding:1rem;
  }
  .card-footer{
    padding:.5rem 1rem;
    border-top:1px solid #ddd;
  }
}

    文本组件title.less

    h3 {
  font-size: 1rem;
}
h4 {
  font-size: 0.8rem;
}
h3,
h4,
h5 {
  color: #555;
}

    分页组件page.less

    .page{
  display:flex;

  a{
    display:block;
    padding:.3rem .8rem;
    border:1px solid #ddd;
    // 让重叠的两个边框线叠加在一起
    margin-left:-1px;
    color:#555;

    &:first-child{
      border-top-left-radius:.3rem;
      border-bottom-left-radius:.3rem;
    }

    &:last-child{
      border-top-right-radius:.3rem;
      border-bottom-right-radius:.3rem;
    }

    &.current{
      background:#009688;
      color:white;
      border:1px solid #009688;
    }
  }
}

    边距组件margin.less

    .mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}

    列表组件list-group.less

    .list-group{
  li{
    display:flex;
    justify-content:space-between;
    padding:.8rem 0;
    border-bottom:1px solid #ddd;
    font-size:.9rem;

    &:last-child{
      border-bottom:none;
    }

    a{
      color:#777;
    }

    span{
      color:#888;
      font-size:.6rem;
    }
  }
}

    超小屏适配 small-x.less

    body {
  background: white;
}
.container {
  width: 95%;
  margin: 0 auto;
}
.col-xs-12 {
  grid-column: span 12;
}
.col-xs-11 {
  grid-column: span 11;
}
.col-xs-10 {
  grid-column: span 10;
}
.col-xs-9 {
  grid-column: span 9;
}
.col-xs-8 {
  grid-column: span 8;
}
.col-xs-7 {
  grid-column: span 7;
}
.col-xs-6 {
  grid-column: span 6;
}
.col-xs-5 {
  grid-column: span 5;
}
.col-xs-4 {
  grid-column: span 4;
}
.col-xs-3 {
  grid-column: span 3;
}
.col-xs-2 {
  grid-column: span 2;
}
.col-xs-1 {
  grid-column: span 1;
}

    小屏适配small.less

    body{
  background:white;
}
.container{
  width:750px;
  margin:0 auto;

}
.col-sm-12{
  grid-column:span 12;
}
.col-sm-11{
  grid-column:span 11;
}
.col-sm-10{
  grid-column:span 10;
}
.col-sm-9{
  grid-column:span 9;
}
.col-sm-8{
  grid-column:span 8;
}
.col-sm-7{
  grid-column:span 7;
}

.col-sm-6{
  grid-column:span 6;
}
.col-sm-5{
  grid-column:span 5;
}
.col-sm-4{
  grid-column:span 4;
}
.col-sm-3{
  grid-column:span 3;
}
.col-sm-2{
  grid-column:span 2;
}
.col-sm-1{
  grid-column:span 1;
}

    中屏适配medium.less

    body{
  background:white;
}
.container{
  width:950px;
  margin:0 auto;

}
.col-md-12{
  grid-column:span 12;
}
.col-md-11{
  grid-column:span 11;
}
.col-md-10{
  grid-column:span 10;
}
.col-md-9{
  grid-column:span 9;
}
.col-md-8{
  grid-column:span 8;
}
.col-md-7{
  grid-column:span 7;
}

.col-md-6{
  grid-column:span 6;
}
.col-md-5{
  grid-column:span 5;
}
.col-md-4{
  grid-column:span 4;
}
.col-md-3{
  grid-column:span 3;
}
.col-md-2{
  grid-column:span 2;
}
.col-md-1{
  grid-column:span 1;
}

    大屏适配big.less

    body{
  background:transparent;
}
.container{
  width:1180px;
  margin:0 auto;

}
.col-lg-12{
  grid-column:span 12;
}
.col-lg-11{
  grid-column:span 11;
}
.col-lg-10{
  grid-column:span 10;
}
.col-lg-9{
  grid-column:span 9;
}
.col-lg-8{
  grid-column:span 8;
}
.col-lg-7{
  grid-column:span 7;
}

.col-lg-6{
  grid-column:span 6;
}
.col-lg-5{
  grid-column:span 5;
}
.col-lg-4{
  grid-column:span 4;
}
.col-lg-3{
  grid-column:span 3;
}
.col-lg-2{
  grid-column:span 2;
}
.col-lg-1{
  grid-column:span 1;
}

    效果图

    CSS3媒体查询响应式布局bootstrap框架的使用

    使用rem单位操作尺寸响应处理

    以上是“CSS3媒体查询响应式布局bootstrap框架的使用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


    当前名称：CSS3媒体查询响应式布局bootstrap框架的使用
    链接URL：http://cdkjz.cn/article/jdcjsj.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    企业网站设计成都网站运营维护成都展柜厂网站制作网络推广公司成都网站推广工业净化空调明安消防器材成都电商网站建设方案成都定制高级网站建设

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图