前端布局學習
阿新 • • 發佈:2018-11-20
屏幕適配 媒體查詢 demo 20px bubuko alc gin dde pre
- 杭州出差中,項目要做大屏展示,據說到時候是4塊1920*1080的顯示屏進行展示,這幾天一直苦想到底如何進行屏幕適配呢,探索了一兩天,決定用媒體查詢結合比例計算來進行頁面設計,以便於全屏、屏幕放大縮小的正常展示,學著寫了個demo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全屏測試</title> <style type="text/css"> * { margin: 0; padding: 0; overflow-x: hidden; } html { height: 100%; width: 100%; } body { width: 100%; max-width: 100%; height: 100%; max-height: 100%; background-color: greenyellow; } .header { width: calc(100% - 4px); height: 100px; background-color: black; border: 2px solid greenyellow; } /*媒體查詢操作*/ @media screen and (min-width: 640px) and (max-width: 1920px) { .left { width: calc(25% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; float: left; } .center { width: calc(50% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; float: left; } .right { width: calc(25% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; float: left; } } @media screen and (min-width: 200px) and (max-width: 640px) { .left { width: calc(100% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; } .center { width: calc(100% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; } .right { width: calc(100% - 14px); height: calc(100% - 14px); border: 2px solid greenyellow; margin: 5px; } } .main { width: 100%; height: calc(100% - 106px); background-color: #000000; } .sub-left { width: calc(100% - 14px); height: calc(50% - 14px); border: 2px solid greenyellow; margin: 5px; float: left; } .sub-right { width: calc(100% - 14px); height: calc(50% - 14px); border: 2px solid greenyellow; margin: 5px; float: left; } </style> </head> <body> <div class="header"> </div> <div class="main"> <div class="left"> <div class="sub-left"> </div> <div class="sub-left"> </div> </div> <div class="center"> </div> <div class="right"> <div class="sub-right"> </div> <div class="sub-right"> </div> </div> </div> </body> </html>
展示效果
前端布局學習