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

1、淺談響應(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中的Media Query（媒介查詢）是什么？通過不同的

2、媒體類型和條件定義樣式表規(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)用更加的廣泛。語法結(jié)構(gòu)及用法 media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二sRules 示例一：在link中使用media： 上面使

3、用中only可省略，限定于計算機(jī)顯示器，第一個條件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樣式。但是我們平時做項(xiàng)目時就沒有寫的那么復(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; 基準(zhǔn)字體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è)備下實(shí)現(xiàn)自適應(yīng)。例如：HTML代碼 貸款簡介貸款種類貸款方式貸款利率申請條件貸款資料擔(dān)保流程貸款利率貸款額度影響因素 js代碼/計算側(cè)邊導(dǎo)航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è)置基準(zhǔn)字體htmlfont-size: 10px; /* 基本字體 */*字體型號*/.fts10font-size: 1.0rem;.fts11font-size: 1.1rem;.fts12font-size: 1.2rem; 通過媒體查詢里的字體大小就可以實(shí)現(xiàn)頁面的字體大小的自適應(yīng)了二、頁面的頭部之間的設(shè)置三、box-sizi

9、ng屬性box-sizing: border-box;此時盒子的padding、border是內(nèi)減的。box-sizing是IE9開始兼容的css3屬性，智能手機(jī)中支持這個屬性（過老的安卓版本除外），這個屬性在流式布局中非常有用，是神器！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