淺談響應式頁面課件

淺談響應式頁面一、媒體查詢1、適用于所有屏幕大小的設計固定寬度的靜態(tài)網站很快被靈活的響應式設計所取代，該設計可以根據屏幕大小進行上擴和下擴。利用響應式設計，無論您采用什么設備或屏幕來訪問網站，都可以呈現(xiàn)一個可用的界面。響應式設計可以響應各種屏幕大小，因此也成為了“前瞻性”的網站，屏幕將隨著新的智能手機和平板電腦的問世而快速演變。實現(xiàn)響應式設計的主要途徑是使用CSS媒體查詢。2、響應式頁面最主要需要考慮的就是：1)媒體查詢節(jié)點的設置2)寬、高的設置3)字體大小的設置注：2和3都依附在1之上

3、媒體查詢節(jié)點的設置CSS中的MediaQuery（媒介查詢）是什么？通過不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用于表達”大于或等于”和”小與或等于”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設備下實現(xiàn)豐富的界面，特別是移動設備，將會運用更加的廣泛。但是我們平時做項目時就沒有寫的那么復雜了，例子：html{ font-size-adjust:none; font-size:10px;/*基本字體*/}@mediaonlyscreenand(max-width:319px){ html{font-size:8px;}}@mediaonlyscreenand(min-width:320px)and(max-width:375px){ html{font-size:10px;}}。。。。。。。@mediaonlyscreenand(min-width:1200px){ html{font-size:22.5px;}}動態(tài)計算不同像素下的字體大小<scripttype="text/javascript"> varclientWidth=document.documentElement.clientWidth; if(clientWidth>640)clientWidth=640; document.documentElement.style.fontSize=document.documentElement.clientWidth/32+'px';</script>基準字體10px;大于640像素時字體大小始終為20px.注：網頁可見區(qū)域寬：document.body.clientWidth;4、寬的設置a、大模塊寬度以百分比算b、部分模塊也可以用彈性盒子設置5、高的設置a、高度可以直接用em、rem設置，這樣方便部分模塊行高的設置；b、也可以讓他完全自適應，使用padding-bottom設置，但是這種做法弊端也很大，例如：按鈕的文本垂直居中不好設置。不建議使用。c、側遍欄固定定位時，根據排版不同，可以使用js動態(tài)設置它的高度，使他在不同設備下實現(xiàn)自適應。例如：HTML代碼<divclass="sidebarmain"> <ulclass="sidebarfts12"id="sidebar"> <liclass="sidelistchecked">貸款簡介</li> <liclass="sidelist">貸款種類</li> <liclass="sidelist">貸款方式</li> <liclass="sidelist">貸款利率</li> <liclass="sidelist">申請條件</li> <liclass="sidelist">貸款資料</li> <liclass="sidelist">擔保流程</li> <liclass="sidelist">貸款利率</li> <liclass="sidelist">貸款額度</li> <liclass="sidelist">影響因素</li> </ul> </div>6、字體大小設置基準字體html{font-size:10px;/*基本字體*/}/*字體型號*/.fts10{font-size:1.0rem;}.fts11{font-size:1.1rem;}.fts12{font-size:1.2rem;}通過媒體查詢里的字體大小就可以實現(xiàn)頁面的字體大小的自適應了三、box-sizing屬性box-sizing:border-box;此時盒子的padding、border是內減的。box-sizing是IE9開始兼容的css3屬性，智能手機中支持這個屬性（過老的安卓版本除外），這個屬性在流式布局中非常有用，是神器！box-sizing：這個屬性計算了padding和border。但是沒有計算margin。例如：.navmenuli{ float:left; width:16.66%; height:4rem; line-height:4rem; text-align:center; background-color:#31B890; color:#FFFFFF; box-sizing:border-box;padding:0.5rem;border-right:2pxsolid#06B806;}四、彈性盒子例：html代碼<dlclass="dlstylewtcontpad-l10r20"> <dtclass="dltitle">姓名</dt> <ddclass="ddstyle"> <inputclass="dlinput"type="text"placeholder="輸入名字或姓氏"/> </dd> <divclass="xuanx"> <spanclass="radioboxchecked"><em></em></span> <label>男</label> <spanclass="radiobox"><em></em></span> <label>女</label> </div></dl>.dlstyle{display:-webkit-bo