详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

媒体设备类型使用详解：




    
    document
    
    
    

    
    
 h1{
     color:red;
 }
    

    
    
 h1{
     color:green;
 }
    

    
    
 h1{
     font-weight:normal;
 }
    


  cyy

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

使用@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
    
    
    

    
 h1{
     color:red;
 }
    


    h1{
 color:blue;
    }



  CYY

逻辑或使用技巧操作：




    
    document
    
    
    

    
    
 h1{
     color:red;
 }
    



  CYY

not关键词使用注意要点：




    
    document
    
    
    

    
    
 
 @media not screen and (min-width:500px) and (max-width:768px){
     h1{
  color:red;
     }
 }
    



  CYY

使用only排除低端浏览器：




    
    document
    
    
    

    
    
 
 @media only screen and (min-width:500px){
     h1{
  color:red;
     }
 }
    



  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

h2 {
  font-size: 1rem;
}
h3 {
  font-size: 0.8rem;
}
h2,
h3,
h4 {
  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;
}

效果图

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

推荐使用自动化构建工具插件。

到此这篇关于详解CSS3媒体查询响应式布局bootstrap 框架原理实战的文章就介绍到这了,更多相关CSS 响应式布局bootstrap 框架内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

CSS教程相关栏目本月热门文章