今天又寫了乙個全屏網頁，其實之前也寫了很多次，一直都沒有總結，今天在這裡總結出來的小技巧記錄一下。pc的設計圖一般都1920的，但是還有很多小屏，比如自己的筆記本就是1366，如果說完全按照設計圖的尺寸布局，那放在小螢幕上瀏覽時總會有一些地方不協調，字型過大，過大，間距過大。下面就以今天的網頁為例解析一下遇到的情況。1、字型不協調的問題
這個時候em這個單位就很用。我們pc端布局通常習慣使用px,px大小是固定的，而em大小不是固定的，em會繼承父元素的字型大小，比如父元素的font-size為16px,其子元素的font-size為1em,那這個時候子元素的font-size換算過來就是16px，所以這時16px=1em,如果父元素font-size為20px,那這時1em=20px,em會隨父元素font-size變化而變化。先看**：
.banner}
前一段是是適配1920，後一段適配1366及以下，在不同的螢幕下，我們只需要改變父元素的字型大小，使用em子元素就是等比例放大或者縮小，如果子元素使用的是px，可能不同解析度下都要修改一下，如果子元素很多，那改起來很麻煩，這樣只需要改動乙個地方，子元素自動適配，是不是用起來很開心。@media screen and(max-width: 1366px )}
2、背景如何在不同解析度看起來都差不多，沒有被拉伸的感覺
這個得根據具體情況來分析，具體採用什麼樣的方式，先看幾天遇到的幾種情況。
第一種：
背景上下有漸變，中間位置有要突出的東西，這時候建議高度就是背景原有高度，寬度自動適應螢幕，這時候background-position就很有用，第乙個值表示背景的水平方向起始位置，第二個表示垂直方向，具體的可以自行搜尋了解一下，此時第乙個值為center水平方向會保留中間位置突出的東西，但是兩邊多餘灰色背景會隨螢幕縮小而減少，第二個center就是背景圖垂直方向100%填充。
是不是在小螢幕上最大程度保留了背景圖要突出的東西。
第二種
背景水平位置突出的東西不能缺少，底部突出東西也不能缺少，頂部的背景可以考子元素的高度撐開，此時需要用到background-position和background-size兩個屬性，其中background-position第二個值為bottom為背景圖從底部位置開始填充，而background-size第乙個值為100%，表示水平方向背景圖100%填充，高度auto自動，這樣高度靠子元素高度撐開，背景圖就不會有被拉伸的感覺。
螢幕太小，只能截這麼短，看水平和底部位置，是不是沒什麼變化。同理，如果表現的是頂部和水平，只需將bottom改為top即可，今天也遇到這種情況，這裡就不列出了。
3、水平位置文字居中，居中
文字居中很簡單，包裹文字的容器寬度等於螢幕寬度，直接設定乙個text-align:center就可以了。居中有兩種方法
第二種：使用css3的transform:scale()方法，不過ie8不支援，ie9是支援的，這種方法其實不太好，如果螢幕解析度差別不大，用一套還可以，如果差別大，就要寫多個**查詢，推薦第一種。.case}
4、其他@media screen and(max-width: 1366px )}}第一種
這種情況參考居中，最外層盒子設定百分比，子元素也設定百分比。
第二種
這個帶表單的，最好可視區域顯示完要填寫的資訊，所以老老實實多寫幾套適配吧，我也沒有想到更好的辦法。
注：以上示例**都是sass的寫法，若拷貝使用改為正常css選擇器，或者使用sass編譯工具編譯都可以。
今天遇到大概就這幾點，睡了睡了。
網頁布局技巧
布局 在css出現之前使用 對網頁進行布局的，利用了 的無邊框和間距的特性 將 的邊框與單元格間距都設為0 然後再將網頁元素按版面需要進行劃分之後，插入到 的各個單元中。但使用 布局，會大量使用到 的巢狀，並且會在 裡假如大量的如width border cellspacing cellpaddin...
CSS網頁布局開發小技巧24則
十五 margin取負值可以在標籤使用絕對定位的時候起到相對定位的作用，在頁面居中顯示時，使用絕對定位的層不適合使用left xxpx這個屬性。把這個層放到乙個要相對定位的標籤旁，然後使用margin的負值是個好方法。十六 絕對定位時使用margin值定位可以達到相對於本身所在位置的定，這與top，...
CSS網頁布局開發小技巧24則
在css網頁布局開發中，會有很多小技巧，新手朋友往往對此很不熟悉。在某一兩個小問題上，或許糾纏很長時間才能搞明白，雖然在jb51.net的文件中，多次提及過這方面的內容，但依然有很多朋友在這些問題上犯錯。我們今天看看這些css技巧，認真讀一讀，或許您並不能完全理解，您可以在jb51.net進行搜尋，...