html5 響應式佈局示例
阿新 • • 發佈：2019-02-01
-
響應式佈局
- @media screen and (min-width: 600px) and (max-width : 960px)
就從這個條件語句開始介紹，media屬性後面跟著的是一個 screen 的媒體型別（上面說過的十種媒體型別之一）。然後用 and 關鍵字來連線條件（其他關鍵字還有 not， only，看字面大家能理解，就不多說。），然後括號裡就是一個媒體查詢語句，稍微懂點css的同學都能看懂，這個條件語句意思是在大於600小於960的解析度下所啟用的樣式表。
html程式碼：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="css/style.css" rel="stylesheet"> <title></title> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"></div> </body> </html>
css程式碼：
*{ margin: 0px; padding: 0px; } .heading, .container, .footing{ margin:10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: #ff0000; } @media screen and (min-width: 960px) { .heading, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, .right{ width: 200px; } .main{ margin: 0px 5px; width: 550px; } .container{ height: 500px; } } @media screen and (min-width: 600px) and (max-width: 960px) { .heading, .container, .footing{ width: 600px; } .left, .main{ float: left; height: 400px; } .right{ display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } @media screen and (max-width: 600px){ .heading, .container, .footing{ width: 400px; } .left, .right{ width: 400px; height: 100px; } .main{ margin-top: 20px; width: 400px; height: 200px; } .right{ margin-top: 10px; } .container{ height: 420px; } }