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

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

2、媒體類型和條件定義樣式表規(guī)則。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用于表達”大于或等于”和”小與或等于”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的media和import規(guī)則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設(shè)備下實現(xiàn)豐富的界面，特別是移動設(shè)備，將會運用更加的廣泛。語法結(jié)構(gòu)及用法 media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二sRules 示例一：在link中使用media： 上面使

3、用中only可省略，限定于計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設(shè)備最大寬度。 示例二：在樣式表中內(nèi)嵌media： media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （ori

4、entation:portrait） srules 在示例二中，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px及其以下手持設(shè)備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備；屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。但是我們平時做項目時就沒有寫的那么復(fù)雜了，例子： htmlfont-size-adjust: none;font-size: 10px; /* 基本字體 */ media only screen and (max-width:319px )htmlfont-size: 8px;

5、media only screen and (min-width:320px ) and (max-width:375px )htmlfont-size: 10px; 。 media only screen and (min-width:1200px )htmlfont-size: 22.5px; 動態(tài)計算不同像素下的字體大小 var clientWidth = document.documentElement.clientWidth; if(clientWidth 640) clientWidth = 640; d o c u m e n t . d o c u m e n t E l e

6、m e n t . s t y l e . f o n t S i z e = document.documentElement.clientWidth / 32 + px; 基準字體10px;大于640像素時字體大小始終為20px.注：網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;4、寬的設(shè)置a、大模塊寬度以百分比算b、部分模塊也可以用彈性盒子設(shè)置5、高的設(shè)置a、高度可以直接用em、rem設(shè)置，這樣方便部分模塊行高的設(shè)置；b、也可以讓他完全自適應(yīng)，使用padding-bottom設(shè)置，但是這種做法弊端也很大，例如：按鈕的文本垂直居中不好設(shè)置。不建議使用。c、側(cè)遍欄固定

7、定位時，根據(jù)排版不同，可以使用js動態(tài)設(shè)置它的高度，使他在不同設(shè)備下實現(xiàn)自適應(yīng)。例如：HTML代碼 貸款簡介貸款種類貸款方式貸款利率申請條件貸款資料擔保流程貸款利率貸款額度影響因素 js代碼/計算側(cè)邊導航li元素高度var wheight=$(window).height();var headheight=$(header).height();var footerheight=$(footer).height();var length=$(.sidebar).children(li).length;var sidebarheight=wheight-headheight-footerheigh

8、t-(length+1);var liheight=sidebarheight/length;$(.sidebar li).height(liheight+px);$(.sidebar li).css(line-height,liheight+px);6、字體大小設(shè)置基準字體htmlfont-size: 10px; /* 基本字體 */*字體型號*/.fts10font-size: 1.0rem;.fts11font-size: 1.1rem;.fts12font-size: 1.2rem; 通過媒體查詢里的字體大小就可以實現(xiàn)頁面的字體大小的自適應(yīng)了二、頁面的頭部之間的設(shè)置三、box-sizi

9、ng屬性box-sizing: border-box;此時盒子的padding、border是內(nèi)減的。box-sizing是IE9開始兼容的css3屬性，智能手機中支持這個屬性（過老的安卓版本除外），這個屬性在流式布局中非常有用，是神器！box-sizing：這個屬性計算了padding和border。但是沒有計算margin。例如： .navmenu lifloat: 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: 2px solid #06B806;四、彈性盒子例：html代碼 姓名男女 .dlstyledisplay: -webki