作爲一個全棧程序開發人員，感覺有時候真的很心累呀，因爲既要滿足後端程序的實現，還要理解我們客戶爸爸的獨特見解。入行兩年，個人對於移動端界面的書寫漸漸找到了一些適合自己的東西。
1、我們單位UI小姐姐推薦的“藍湖”是真的的好用，設計師需要安裝PhotoshopCC2015以上版本（這裏傳送一個我弄到的 photoshop cc 2018 版本 ，網盤鏈接：https://pan.baidu.com/s/1_bOEotfmC9icC-6-bdMZJA 提取碼：xga7 ，安裝時請斷網，不然會讓你充錢的哈。）。具體藍湖的安裝請自行百度教程。關於藍湖的使用，主要是方便前端人員對於設計圖尺寸的測算，以前要自己打開ps來慢慢量，現在直接打開藍湖，選取元素查看即可，如下：
2、關於移動端界面的單位換算，我喜歡使用rem這種單位，它默認與px是100的比例，所以我喜歡使用像素單位查看尺寸，然後得到尺寸再除以100就是我需要的值了，每一個界面的頭部加上js換算rem，關於移動端的框架，推薦使用mui (h5), vue （都實用）：
注意：
1、 border-radius 屬性，如果border 的粗細爲 0.01rem 的時候，個人建議 border-radius 的值可以繼續使用px 不然border線條會消失。
2、關於文字包裹器的高度，一定要加上 line-height 這個屬性，不然預覽可能會出問題。
$(function(){
// 綁定到窗口的這個事件中 後期直接引入header.html即可
var designSize = 750; // 設計圖尺寸
var wW = $(window).width(); // 窗口寬度
if(wW > 750){ //PC瀏覽器模擬移動設備端訪問時不要大於常規尺寸750
wW = 750;
}
var rem = wW * 100 / designSize;
$('html').attr('style','font-size:'+rem+'px');
});
/*接下來在css寫樣式的時候如下：*/
/*設計圖尺寸*/
div{
width: 100px;
height: 90px;
}
/*代碼實現*/
div{
width: 1rem;
height: 0.9rem;
}
3、關於移動端的小圖標，因爲我們移動端經常使用到一些icon的小圖標，比如一些網站的頁面底部（會有幾個菜單，菜單可能會帶有圖標），如果要把設計圖中的圖標全部裁剪成圖片的話，如果是底部菜單這種，點擊跳轉頁面還要變顏色，搞成圖片就特別麻煩，一是排版麻煩，圖片加文字在div的排版是很令人頭疼的，有時候莫名其妙的會變得歪歪扭扭的，二是頁面跳轉的時候換顏色也麻煩。所以我發現了阿里媽媽的矢量圖標庫（本名“阿里巴巴矢量庫”）哈哈，第一次知道的時候，簡直驚呆了，簡直就是救世主啊，地址傳送：https://www.iconfont.cn/。
我們可以將需要的圖標，使用代碼引入的方式去使用，這樣他的性質就跟文字差不多了，修改方便，關鍵是特別好用。使用方法：
a.註冊阿里巴巴矢量庫，記住你的用戶名
b.搜索需要的圖標，看上的圖標，點擊購買
c.此時你的購物車就出現了你的圖標，個人建議請新建項目存放圖標。
d.進入項目，裏面有你選中的圖標
e.關於圖標的引用，首先引入主要 css ，需要哪個圖標就去你的項目下複製它的相關信息，html 代碼中如下使用：
- Unicode 方式 <span class="iconfont"></span>
![]()
- Font class 方式 <span class="iconfont icon-tupian"></span>
![]()
4、關於移動端的界面實現，我新瞭解的東西暫時這麼多，以此作爲筆記。