CSS - 響應式佈局
阿新 • • 發佈：2018-11-11
概念
隨著網頁大小的改變，而改變佈局的響應方式。
實現方式
- interger 設定觸發寬度
網頁小於<integer>設定寬度
@media only screen and (max-width: <integer>) { selector { } }
網頁寬度不位於<integer>設定寬度範圍內
@media only screen and (min-width: <integer>) and (max-width: <integer>) { selector { } }
網頁大於<integer>設定寬度
@media only screen and (min-width: <integer>) { selector { } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>響應式佈局</title> <style type="text/css"> /*基本樣式塊*/ /*.box { max-width: 1200px; width: 95%; margin: 0 auto; background-color: red!important; } .it { width: 300px; height: 300px; font: 900 50px/300px 'STSong'; text-align: center; float: left; border-radius: 50%; background-color: orange; } .box:after { content: ""; display: block; clear: both; }*/ html, body { margin: 0; } .it { height: 300px; background-color: orange; font: 900 50px/300px 'STSong'; text-align: center; border-radius: 50%; float: left; } .box:after { content: ""; display: block; clear: both; } /*螢幕寬度超出1200px*/ @media only screen and (min-width: 1200px) { /*1.在響應式佈局內,css語法同正常樣式表語法*/ /*2.響應式佈局之間存在不同螢幕尺寸的限制,使用樣式相互不影響*/ /*解釋:滿足當前螢幕尺寸時,該樣式塊起作用,不滿足時,則樣式塊失效*/ /*3.當響應式佈局中樣式塊起作用時,會與正常樣式塊設定協同佈局,遵循選擇器的優先順序規則*/ .box { background-color: pink; } .it { width: 25%; } /*原則:*/ /*1.採用響應式佈局的頁面,基本樣式塊只做共性樣式設定 需要根據頁面尺寸進行適應變化的樣式均有響應式佈局處理*/ /*2.要進行響應式佈局的頁面要處理所有螢幕尺寸下的樣式塊*/ } /*螢幕寬度間於600至1200px*/ @media only screen and (min-width: 600px) and (max-width: 1200px) { .box { background-color: brown; } .it { width: 30%; margin: 0 calc(10% / 6); } } /*螢幕寬度小於600px*/ @media only screen and (max-width: 600px) { .box { background-color: cyan; } .it { width: 80%; margin-left: 10%; min-width: 300px; } } </style> </head> <body> <div class="box"> <div class="it">1</div> <div class="it">2</div> <div class="it">3</div> <div class="it">4</div> <div class="it">5</div> <div class="it">6</div> <div class="it">7</div> <div class="it">8</div> <div class="it">9</div> <div class="it">10</div> <div class="it">11</div> <div class="it">12</div> </div> </body> </html>
