css--響應式網格佈局
阿新 • • 發佈:2020-12-05
百度前端技術學院 任務八:響應式網格(柵格化)佈局
使用 HTML 與 CSS 實現類似 BootStrap 的響應式 12 欄網格佈局,根據螢幕寬度,元素佔的欄數不同。
示例程式碼
DOM結構:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>任務八:響應式網格(柵格化)佈局</title> <link rel="stylesheet" type="text/css" href="css/task08.css"css示例程式碼/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col"> </div> <div class="col-md-4 col-sm-6 col"> </div> <div class="col-md-4 col-sm-12 col"> </div> </div> <div class="row"> <div class="col-md-3 col-sm-3 col"> </div> <div class="col-md-6 col-sm-6 col"> </div> <div class="col-md-3 col-sm-3 col"> </div> </div> <div class="row"> <div class="col-md-1 col col-sm-2"> </div> <div class="col-md-1 col col-sm-2"> </div> <div class="col-md-2 col col-sm-8"> </div> <div class="col-md-2 col col-sm-3"> </div> <div class="col-md-6 col col-sm-3"> </div> </div> </div> </body> </html>
html,body{ margin: 0; padding: 0; } .container{ box-sizing: border-box; border: 1px solid #999999; padding: 10px; } .row:after, .row:before{ content: ""; display: table; clear: both; } .col{ box-sizing: border-box; border: 1px solid #999999; background-color: #EEEEEE; height: 50px; margin: 10px; float: left; } @media only screen and (min-width: 769px) { .col-md-1{ width: calc(8.333% - 20px); } .col-md-2{ width: calc(16.666% - 20px); } .col-md-3{ width: calc(25% - 20px); } .col-md-4{ width: calc(33.333% - 20px); } .col-md-6{ width: calc(50% - 20px); } } @media only screen and (max-width: 768px) { .col-sm-2{ width: calc( 16.666% - 20px); } .col-sm-3{ width: calc( 25% - 20px); } .col-sm-6{ width: calc( 50% - 20px); } .col-sm-8{ width: calc( 66.666% - 20px); } .col-sm-12{ width: calc( 100% - 20px); } }看別人的實現,get到新姿勢:使用萬用字元
/* 包含col-的所有class*/ [class*="col-"] { float: left; min-height: 1px; margin: 10px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #999; box-sizing: border-box; background-color: #eee; } /* 以col-開頭的class */ [class^="col"] { } /* 以col-結尾的class */ [class$="col-"] { }