欢迎光临
我的个人博客网站

清晰的CSS 3媒体查询响应式布局,bootstrap 框架原理实战

媒体设备类型使用详解:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <!-- 屏幕设备 -->     <style media="screen">         h1{             color:red;         }     </style>      <!-- 打印机设备 -->     <style media="print">         h1{             color:green;         }     </style>      <!-- 屏幕设备和打印机设备 -->     <style media="screen,print">         h1{             font-weight:normal;         }     </style> </head> <body>   <h1>cyy</h1> </body> </html>

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <!-- 默认media为all,所有设备 -->     <link rel="stylesheet" href="css/commob.css" media="all">     <link rel="stylesheet" href="css/screen.css" media="screen">     <link rel="stylesheet" href="css/print.css" media="print"> </head> <body>   <h1>cyy</h1> </body> </html>

 

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

这是推荐的做法:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <link rel="stylesheet" href="css/style.css"> </head> <body>   <h1>cyy</h1> </body> </html>

style.css

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

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <link rel="stylesheet" href="css/style.css"> </head> <body>   <div class="navbar">       <a href="">cyy</a>       <ul>           <li>cyy1</li>           <li>cyy2</li>           <li>cyy3</li>       </ul>   </div> </body> </html>

相关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条件判断响应式应用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <style media="screen and (min-width:768px) and (max-width:1000px)">         h1{             color:red;         }     </style>  <style media="screen and (max-width:768px)">     h1{         color:blue;     } </style> </head> <body>   <h1>CYY</h1> </body> </html>

 

逻辑或使用技巧操作:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <!-- 当设备为横屏展示,或者设备宽度大于768px不论横竖屏时 -->     <style media="screen and (orientation:landscape),screen and (min-width:768px)">         h1{             color:red;         }     </style>  </head> <body>   <h1>CYY</h1> </body> </html>

 

not关键词使用注意要点:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>           <style>         /* 如果满足条件,则不应用该样式 */         @media not screen and (min-width:500px) and (max-width:768px){             h1{                 color:red;             }         }     </style>  </head> <body>   <h1>CYY</h1> </body> </html>

 

使用only排除低端浏览器:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>           <style>         /* 加上only之后,低端浏览器会忽略该句语法 */         @media only screen and (min-width:500px){             h1{                 color:red;             }         }     </style>  </head> <body>   <h1>CYY</h1> </body> </html>

 

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

html

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>      <link rel="stylesheet" href="css/style.css">  </head> <body>   <header class="mb-2">       <div class="container">         <div class="navbar">             <a href="" class="logo">CYY</a>             <label for="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label>             <input type="checkbox" name="" id="toggle-nav">             <div class="collapse">                 <ul class="links">                     <li><a href="">系统学习</a></li>                     <li><a href="">实战课程</a></li>                     <li><a href="">话题讨论</a></li>                     <li><a href="">签到打卡</a></li>                 </ul>                 <div class="form">                     <a href="">登录</a>                     <a href="" class="form-bg">注册</a>                 </div>             </div>         </div>       </div>   </header>       <div class="container">     <div class="row">         <div class="col-6 col-lg-9 col-xs-12">             <div class="card">                 <div class="card-header">                     <h2>最新更新</h2>                 </div>                 <div class="card-body">                     <ul class="list-group">                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                         <li>                             <a href="">cyy开始学习响应式布局</a>                             <span>2020-11-13</span>                         </li>                     </ul>                 </div>                 <div class="card-footer">                     <div class="page">                         <a href=""><</a>                         <a href="">1</a>                         <a href="">2</a>                         <a href="" class="current">3</a>                         <a href="">4</a>                         <a href="">5</a>                         <a href="">></a>                     </div>                 </div>             </div>         </div>         <div class="col-6 col-lg-3 col-xs-12">             <div class="card">                 <div class="card-header">                     <h3>社区小帖</h3>                 </div>                 <div class="card-body"></div>                 <div class="card-footer"></div>             </div>         </div>     </div> </div> </body> </html>

引入统一控制的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);

common.less
*{   margin:0;   padding:0; } :root{   font-size:15px; } a{   text-decoration:none; } ul{   list-style:none; } .row{   display:grid;   grid-template-columns:repeat(12,1fr); } .col-12{   grid-column:span 12; } .col-11{   grid-column:span 11; } .col-10{   grid-column:span 10; } .col-9{   grid-column:span 9; } .col-8{   grid-column:span 8; } .col-7{   grid-column:span 7; }  .col-6{   grid-column:span 6; } .col-5{   grid-column:span 5; } .col-4{   grid-column:span 4; } .col-3{   grid-column:span 3; } .col-2{   grid-column:span 2; } .col-1{   grid-column:span 1; } h2{   font-weight:normal; }

 

导航组件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; }

效果图

清晰的CSS 3媒体查询响应式布局,bootstrap 框架原理实战

 

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

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 清晰的CSS 3媒体查询响应式布局,bootstrap 框架原理实战
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏