慕客/蓝湖 | 前端和UI协作平台

慕客官网，注册并登录账号后，下载PS插件，然后安装插件。然后打开PS即可看到插件。

蓝湖是同类平台，但是好像项目人数10人以上就收费，而慕客是100人以下免费用。

使用

本使用教程来源于pink老师

PS的慕客插件里上传全部画板
登录官网，查看项目，双击项目可进入开发者模式

点击组件即可复制上面的文字、一览文字大小、组件宽高、颜色值，行高、字间距甚至一键复制其CSS代码。除此之外前端师还关注切图，以前是cutman，现在，我们在PS里对psd文件，找到需要的一组图片组成的图层，可以用小眼睛的显示/隐藏来确定是否我们需要的图层，是的话就用慕客插件的标记切图按钮标记下，可以标记多个图层，然后上传。还是在网页上，多捣鼓下找到切图栏，你可以指定图片用于IOS/WEB/ANDROID。是1/2倍图，是png/webP/jpg格式：
除此之外我们还可以方便的获取边距：
实际中慕客上的项目多是由UI美工建立的，她们将项目分享给前端让前端加入项目。
咱也不知道自定义宽度有啥用，好像是指定设计稿大小为750px，倒是指定单位转换比挺好的。

黑马面面

引言

为响应vue+vant推荐的rem + flexible.js布局手段，本次案例 flex + rem + flexible.js + LESS布局。

UI给我的设计稿是375px宽，我们计划将页面按20等分划分，于是

@media screen and (min-width: 750px) {
    html {
        font-size: 37.5px !important; /* 750/20=37.5 */
    }
}

cssrem插件里1rem=375px/20=18.75px
按20等分修改flexible.js源码

如果UI给我的设计稿是750px宽，我们计划将页面按10等分划分，于是

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important; /* 750/10=75 */
    }
}

cssrem插件里1rem=750px/10=75px
按10等分修改flexible.js源码

swiper插件

swiper官网，swiper是纯JavaScript打造的滑动特效插件（各种轮播图、幻灯片），面向手机、平板电脑等移动端设备
使用，本教程来自pink老师
- 下载文件包，其中包含了.css和.js，不一定非要用最新版的文件包
- 在官网找到像你的需求的案例，点击《在新窗口打开》然后查看源码复制html结构，css样式和js语法到你的项目中。（建议：把轮播图的html代码复制到一个div.某类名里去，因为我们可能复用多次该代码，可用后代选择器以区分；把复制来的script代码写进有独立作用域的立即执行函数里，因为我们可能在同网页的别的js文件里也有该代码）
- 模块不一定和需求一样，根据需求定制修改模块。定制会用到官网的导航栏里的《API文档》，例如我们不想要轮播图的分页器，而在复制来的js代码里有如下等名词：slidesPerView、spaceBetween、pagination，根据直译我们猜测pagination是控制分页器的，去搜《API文档》，还真是的。注释掉pagination，不显示分页器了。再比如我们还要有点击可翻页的左右箭头，而模板没有。解决：去找有左右箭头的模板，查看源码，看看哪个变量代表箭头，弄一份箭头的html、css、js代码过来。

faststone capture测屏幕上组件的px大小

需要在设置里把屏幕缩放由默认的125%缩放为100%：

04慕客、黑马面面项目

然后网页缩放调整为100%，此时你放置了100px*100px的div，你在网页上一定能量得宽100px，但是慕客项目显示的设计稿自带缩放，所以有个组件，慕客显示375px，在浏览器上量得不止375px是没毛病的。你可以去PS里量.psd设计稿。举例，我这个组件所在的.psd的画布宽是750px，因为我们项目前端按375px布局（所以慕客里将设计稿自定义画布大小为宽375px），因此你可以在PS里缩放为50%再量，能得375px。