首先，我們要了解一下測試工具。這裡提供兩種測試工具，一種是 chrome 自帶的移動端測試工具，另一種是 opera mobile 移動端測試工具。這裡主要以 chrome 為準，他模擬了主流的手機，並且引擎是webkit。
首先，我們介紹一下解析度，通過 chrome 移動端測試工具可以得知，一般解析度最小的不會小於 320了，最大的不超過 640。這時有人會疑問，我的手機解析度是一千多呢，為什麼設計的時候還是 640畫素？比如 iphone6 plus 的解析度為：1080x1920(有一些設計者稱實際解析度：1242 x 2208)，而它的邏輯解析度為：414x736。沒有超過 640，通過頁面縮放技術進行縮小而不會失真。而如果是 ipad，解析度為：1563x2048，而它的邏輯解析度則為 768x1024，所以，如果設定 640 的頁面，會在豎屏出現白邊。
其次，我們看下典型的兩種設計，一種是全屏流體設計，另一種是固屏流體設計。下面有幾個代表**：
全屏類：如果只是相容移動手機端，那麼不管是固屏還是全屏都是一樣。從設計難度上來說，固屏貌似更容易一點點，因為全屏設計，在電腦上設計，完全放大又失真，設計起來比較難受。我們這裡推薦使用固屏。當然，全屏設計，在pc 端和 pad 平板也可以無縫瀏覽，但卻會失真。固屏雖然會留有白邊，但不會失真。再當然，用了 pad 或 pc 端，為什麼卻訪問用手機網頁呢？除了設計師，還有誰會去這麼做？所以，沒必要。2.途牛旅遊：
固屏類：
1.京東**：
2.**網：
做移動站有乙個必要的知識，就是關於螢幕寬度以及縮放問題。我們習慣性的在標籤之間增加乙個標籤：
name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
//視窗設定上面最大最小比例其實就已經限制了無法縮放了，和最後乙個是否可以縮放有同樣的功能。name=」viewport」
//頁面大小螢幕等寬
width=device-width
//初始縮放比例，1.0表示原始比例大小
initial-scale=1.0
//允許縮放的最小比例
minimum-scale=1.0
//允許縮放的最大比例
maximum-scale=1.0
//使用者是否可以縮放，這裡 no 表示不可以
user-scalable=no
因為不同的手機，解析度都不同，一定要能夠自適應等比例縮放，才能保證布局的正確性。
//設定 max-width 後，開始自適應
img
07 專案實戰 PC 端固定布局 7
本節主要設計一下內容頁面的側欄部分，分三個小塊。經過思考，側欄會包含一些，而主要部分也會包含，那麼側欄放在左邊可能會和主欄的衝突導致不協調，所以，把側欄更換到右邊。實際上，還去掉了高度，讓其自適應 container container sidebar 自適應後，footer 需要 clear bo...
11 專案實戰 PC 端固定布局 11
預覽圖和首頁差不多。具體 如下 風景欣賞 html 部分 alt 曼谷 芭提雅 曼谷 芭提雅 共 8 張 figcaption alt 馬爾地夫雙魚島 馬爾地夫雙魚島 共 12 張 figcaption alt 海南 海南 共 19 張 figcaption alt 富山 大阪 東京 富山 大阪 東...
07 專案實戰
top 案例1 編寫一鍵部署軟體指令碼 案例2 啟動指令碼 案例3 編寫監控指令碼 案例4 編寫安全檢測指令碼 案例5 編寫進度顯示指令碼 本案例要求編寫指令碼實現一鍵部署nginx軟體 web伺服器 實現此案例需要按照如下步驟進行。步驟一 準備工作 1 判斷yum源是否可用 通過yum repol...