淺談響應(yīng)式頁面課件

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

3、媒體查詢節(jié)點(diǎn)的設(shè)置CSS中的MediaQuery（媒介查詢）是什么？通過不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用于表達(dá)”大于或等于”和”小與或等于”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過這個標(biāo)簽屬性，我們可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動設(shè)備，將會運(yùn)用更加的廣泛。但是我們平時做項(xiàng)目時就沒有寫的那么復(fù)雜了，例子：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>基準(zhǔn)字體10px;大于640像素時字體大小始終為20px.注：網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth;4、寬的設(shè)置a、大模塊寬度以百分比算b、部分模塊也可以用彈性盒子設(shè)置5、高的設(shè)置a、高度可以直接用em、rem設(shè)置，這樣方便部分模塊行高的設(shè)置；b、也可以讓他完全自適應(yīng)，使用padding-bottom設(shè)置，但是這種做法弊端也很大，例如：按鈕的文本垂直居中不好設(shè)置。不建議使用。c、側(cè)遍欄固定定位時，根據(jù)排版不同，可以使用js動態(tài)設(shè)置它的高度，使他在不同設(shè)備下實(shí)現(xiàn)自適應(yīng)。例如：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">擔(dān)保流程</li> <liclass="sidelist">貸款利率</li> <liclass="sidelist">貸款額度</li> <liclass="sidelist">影響因素</li> </ul> </div>6、字體大小設(shè)置基準(zhǔn)字體html{font-size:10px;/*基本字體*/}/*字體型號*/.fts10{font-size:1.0rem;}.fts11{font-size:1.1rem;}.fts12{font-size:1.2rem;}通過媒體查詢里的字體大小就可以實(shí)現(xiàn)頁面的字體大小的自適應(yīng)了三、box-sizing屬性box-sizing:border-box;此時盒子的padding、border是內(nèi)減的。box-sizing是IE9開始兼容的css3屬性，智能手機(jī)中支持這個屬性（過老的安卓版本除外），這個屬性在流式布局中非常有用，是神器！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