作为一个全栈程序开发人员，感觉有时候真的很心累呀，因为既要满足后端程序的实现，还要理解我们客户爸爸的独特见解。入行两年，个人对于移动端界面的书写渐渐找到了一些适合自己的东西。
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、关于移动端的界面实现，我新了解的东西暂时这么多，以此作为笔记。