1、 piexl 畫素知識

640 * 1136的圖片能不能在iphone5上完全展示？ iphone5解析度640*1136

邏輯畫素與物理畫素的關係 px邏輯畫素：瀏覽器使用的抽象單位 dp，pt物理畫素：裝置無關畫素 dpr：裝置畫素縮放比 計算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2；

DPI:印表機每英寸可以噴的墨汁點（印刷行業） PPI:螢幕每英寸的畫素數量，即單位英寸內的畫素密度 目前，在計算機顯示裝置引數描述上，二者意思一致 計算公式：以iphone5為例：ppi = √（1136^2 + 640^2）/4 = 326ppi（視網膜retina屏） 注意：單位為硬體畫素（物理畫素），非px PPI越高，畫素數越高，影象越清晰。但可視度月低（小），系統預設縮放比越大。 retina屏（高清屏）：dpr都是>=2。

2、 viewport

手機瀏覽器預設為我們做了兩件事情： ① 頁面渲染在一個980px（ios）的viewport ② 縮放

為什麼要有viewport？ 一個300多畫素的螢幕，放一個1000多畫素的頁面，會混亂，所以要先虛擬一個980畫素的頁面，然後進行縮放。

度量|視口 visual viewport ==== 視窗縮放scale 佈局 layout viewport

設計移動web，為什麼不使用預設的980px的佈局viewport？ ① 寬度不可控制，不同系統的裝置預設值都可能不同 ② 頁面縮小版顯示，互動不友好 ③ 連結不可點 ④ 有縮放，縮放後又有滾動 font-size為40px等於pc上12px同等物理大小，不規範

3、 meta標籤

移動web最佳viewport設定： 佈局viewport = 裝置寬度 = 度量viewport <meta name=” viewport” content = “width=device-width, initial-scale = 1, user-scalable = no”>

4、 設計移動web

方案一：根據裝置的實際寬度來設計（常用）（不縮放）

手機寬320px，我們就拿320px設計。

方案二：1px = 1dp，易解決高清問題

縮放0.5。根據裝置的物理畫素dp等於抽象畫素px來設計。1px畫素邊框和高清圖片都不需要額外處理。

以方案一為例，將pc端頁面改成適應移動端的頁面：

在移動開發過程中要學會做減法，一些不太重要的東西可以隱藏起來。

5、 使用什麼佈局？

很多網站都是使用固定佈局，以前凡客、淘寶也有段時間使用過流式佈局，現在都改成固定佈局。 但是固定佈局不適合移動開發。

可以使用

① 響應式佈局：responsive 高清圖片 retina px em rem ② flex彈性盒子佈局：高效居中方案 等比例填充列行 background-size font-size 多行文字溢位

6、 flexbox彈性盒子佈局

根據元素個數不同，自動填充 display:-webkit-flex; 表示使用彈性佈局 子元素設定 flex:num; 佔容器的比例

劃分方式：

① 等比劃分（flex:num;表示）

② 混合劃分（有固定的畫素（eg：100px）與flex:num;混合在一起）

③ 不定寬高的水平垂直居中：

position：absolute；
top：50%；
left：50%；
transform：translate（-50%，-50%）；

flexbox版不定寬高的水平垂直居中：

.parent{
        justify-content :  center;      //子元素水平居中
        align-items :  center;          //子元素垂直居中
        display :  -webkit-flex;
}

flexbox彈性盒子佈局，介於相容性問題，建議使用舊版方案：

①新flex佈局：

display :  -webkit-flex;
-webkit-fiex:  1;       //子元素的flex
justify-content :  center;
align-items :  center; 

②舊flexbox佈局：

display :  -webkit-flex-box;
-webkit-fiex-box:  1;       //子元素的flex
box-pack :  center;
box-center:  center; 

一種垂直居中的hack：

（1）hack方式

li{
    line-height: 568px;
    vertical-align:middle;
}
li img{
    vertical-align:middle;
}

(2)更優雅的方式，對於高階瀏覽器來說

// 父元素
position:absolute;

// 子元素
li{
    display: table-cell;/*盒模型變成表格的元素*/
    vertical-align: middle;
}

(3)另一種垂直居中方式

li{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

7、 響應式佈局

開發一個頁面，在所有的裝置上都能夠完美展示。

媒體查詢：@media screen and (max-width:100px) { }

媒體型別：screen（螢幕）

print（印表機） handheld（手持裝置） all（通用）

常用媒體查詢引數：

width —— 視口寬高 height —— 視口寬高 device-width —— 裝置的寬高 device- height —— 裝置的寬高 orientation：檢查裝置處於橫向（landscape）還是豎屏（portrait）

響應式設計設計點

設計點一：百分比佈局

僅僅使用媒體查詢來適應不同固定寬度設計，只會從一組css到另一組css的切換。兩種設計之間沒有任何平滑漸變。只使用媒體查詢，佈局有時會變得不可控制。 當然，這只是建議，也有一些頁面採用固定佈局的情況下能夠很好的在一些沒有考慮過媒體查詢情況下的裝置上很好的展示。

設計點二：彈性圖片

思路：無論何時，全都包在圖片的元素寬度範圍內，以最大的寬度同比完整的顯示圖片。 img{ max-height: 100% }

設計點三：重新佈局，顯示與隱藏

當頁面達到手機螢幕寬度的時候，很多時候就要放棄一些傳統的頁面設計思想。力求頁面簡單，做如下處理： ① 同比例縮減元素尺寸 ② 調整頁面結構佈局 ③ 隱藏冗餘的元素 經常需要切換位置元素使用【絕對定位】，減少重繪提高渲染效能。

關於響應式設計的思考：

根據響應式設計的理念，一個頁面包含所有裝置不同螢幕的樣式和圖片，當一個移動裝置訪問一個響應式的頁面，就會下載pc，筆記本，ipad等不同裝置對應的樣式。而這些樣式卻是冗餘的，完全沒有用。 權衡利弊：效能不是最優，但是能減少重複開發。

8、 特殊樣式處理

（1） 高清圖片

在移動web頁面上渲染圖片，為了避免圖片產生模糊，圖片的寬度應該用物理畫素單位渲染，即是100 * 100的圖片，應該使用100dp * 10dp。 width：（w_value/dpr）px； height：（w_height/dpr）px；

（2） 一畫素邊框

同樣是retina螢幕下的問題，根本原因：1px使用2dp渲染。 border：0.5px；（錯誤），僅僅ios8可以使用 通用方案：scaleY（0.5）

（3） 相對單位rem

為了適應各大螢幕的手機，px略顯固定，不能根據尺寸的大小而改變，使用相對單位更能體驗頁面相容性。 em：是根據父節點的font-size為相對單位 rem：是根據html的font-size為相對單位 em在多層巢狀下，變得非常難以維護，rem更加能作為全域性統一設定的度量 那麼，rem的基值設定為多少比較好？ 迴歸目的：為了適應各大手機螢幕 rem = screen.width / 20

不使用rem的情況：font-size

一般來講font-size是不應該使用rem的相對單位的。因為字型的大小是趨向於閱讀的實用性，並不適合於排版佈局。 同理，趨向於一些固定的元素的特性。我們不使用rem而改為使用px去確保在不同螢幕上表現一致（跟rem的目的相反）。

（4） 多行文字溢位•••

單行文字溢位，對title類的使用非常多，而多行文字類，在詳情介紹則用的比較多。

//單行文字溢位…
.inaline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
//多行文字溢位…
.intwoline {
    display: -webkit-box: !important;
    overflow: hidden;
<span class="hljs-attribute">text-overflow</span>: ellipsis;
<span class="hljs-attribute">word-break</span>: break-all;

<span class="hljs-attribute">-webkit-box-orient</span>: vertical;