【筆記】學習CSS佈局14——媒體查詢
阿新 • • 發佈：2018-12-01
“響應式設計（Responsive Design” 是一種讓網站針對不同的瀏覽器和裝置“呈現”不同顯示效果的策略，這樣可以讓網站在任何情況下顯示的很棒！
媒體查詢是做此事所需的最強大的工具。讓我們使用百分比寬度來佈局，然後在瀏覽器變窄到無法容納側邊欄中的選單時，把佈局顯示成一列：
<!DOCTYPE html> <html> <head> <style type="text/css"> @media screen and (min-width:600px) { div { border:4px solid #6ac5ac; } nav { float:left; width:25%; border:4px solid #d64078; } section { margin-left:25%; border:4px solid #fdc72f; } } @media screen and (min-width:599px){ nav ul li { display: inline; } } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">檔案</a></li> <li><a href="#">編輯</a></li> <li><a href="#">選擇</a></li> <li><a href="#">查詢</a></li> <li><a href="#">檢視</a></li> <li><a href="#">工具</a></li> </ul> </nav> <section> 當你調整瀏覽器視窗大小時，佈局比以前更酷了！ </section> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </section> </div> </body> </html>
現在我們的佈局在移動瀏覽器上也顯示的很棒。這裡有一些同樣使用了媒體查詢的著名站點。在MDN文件中你還可以學到更多有關媒體查詢的知識。
額外加分點
使用 meta viewport 之後可以讓你的佈局在移動瀏覽器上顯示的更好。