1.背景自適應且不失真問題的存在
製作自適應背景是ui開發的乙個廣泛問題，也是介面設計師渴望解決的問題，我相信我們彼此都深有體會。
比如,列表的背景圖一定，但是列表的高度隨著列表資料項會發生變化；標題欄的背景，無論橫屏還是豎屏，高解析度還是低解析度，都能自動填充滿，而且不失真等等背景問題。
根據以往的經驗，我們一般採用先切圖後拼湊的做法，這種做法本來我想在這裡和大家介紹一下，其實有的時候還是很有用的，但是說起來會比較麻煩，就不說這個非重點了。
android針對這種情況，專門製作了一種.9.png格式來解決這個問題。
2.9.png格式。
*.9.png就標準的png格式，只是在最外面一圈額外增加1px的邊框，這個1px的邊框就是用來定義中可擴充套件的和靜態不變的區域。特別說明，left（左）和top（上）邊框中交叉部分是可拉伸部分，未選中部分是靜態區域部分。right和bottom（下和右）邊框中交叉部分則是內容部分。
如上圖《也就是說，在手機裡。無論上面那張圖怎麼放大，四周的圓角都是不會被放大的！只有left（左）和top（上）邊框內才會伸縮！
在android中以9.png格式的未背景，則能夠自定義拉伸而不失真，比如系統的button就是乙個典型的例子。
其實呢，無論是left和top，還是right和bottom都是把分成9塊 (邊角四塊是不能縮放的，其他的四塊則是允許縮放的)，所以叫做9.png。
3. 使用draw9patch.jar製作9.png之定義拉伸區域。
前面已經了解到9.png格式的工作方式，下面我們使用工具draw9patch(adk自帶)來製作.9.png。
第一步：準備要拉伸的。
預設的拉伸是整體拉伸，其實邊框部分我們並不想拉伸，好，我們自己來定義拉伸區域，如下圖
然後點選file,匯出為content.9.png。
看看效果！可以看出，邊框非常的清晰。下右邊是未使用.9.png的對比圖，而且也不是我們要的效果：
到這裡為止，我們已經基本會製作.9.png了。為了知識體系的全面性和深入性，我們繼續。
4.使用draw9patch.jar製作9.png之定義內容區域。
是不是覺得上面那張**字和邊距挨的太近，好，我們使用right和bottom邊的線來定義內容區域，來達到增大內邊距的目的。
我們定義了乙個很小的內容區域，其他的地方則自動充當邊框，從而使內邊距顯的很大，如下圖，
呵呵！ok了！
5.製作.9.png的高階技巧。
對於初學draw9patch的人來說，這可以算是高階技巧，那就是：拉伸區域，可以不是連續的，可以不止一塊，而且是和自定義的邊框線的長度成正比。
直接上圖說明：
vue router超詳細教程 3
vue router官方文件參考 應用場景 例如，我們有乙個 user 元件，對於所有 id 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue router 的路由路徑中使用 動態路徑引數 dynamic segment 來達到這個效果 user foo 和 user bar 都將...
VuePress超詳細簡單教程
先讓我們看看 vuepress能幹什麼？有什麼效果？很像vue官網的文件頁面，因為vuepress就是尤大大的乙個力作 vuepress官網介紹介紹的很詳細，這裡只做搭建vuepress專案教程 注意 vuepress基於node 8.0 npm install g vuepress建立工作資料夾 ...
超詳細Node安裝教程
使用快捷鍵 win r 開啟執行 輸入cmd開啟終端。在終端裡面輸入node v和npm v檢視是否都可用，如果顯示版本號則證明安裝成功。1 在cmd輸入命令 npm list g 可檢視預設全域性模組存放路徑，預設路徑也是在c盤。2 在你的node安裝目錄下新建兩個資料夾，分別是 node cac...