移动端布局 和 git-github

什么是原型图?

是问你把原型图还原成真是网页,要具备标注的知识,切图的知识。一般是把psd带有图层的图片文件用ps切图进行还原

现在的切图和标注

现在使用的是 蓝湖和摹客,下载插件到Photoshop,进行切图,也可以在Photoshop标记好要切的图,然后进入到蓝湖和摹客在线

的网站进行标注和切图,在线的网站还有生成的一些代码可以参考。这样方便开发

以前的切图    图层切图  cutterman切图

图层切图

比较复杂的一点就是带有文字和图片的多个图层同时导出为图片。方法按住shift选中多个图层 然后ctrl+e合并图层并导出

原型图导出android原码 原型图怎么导出图片_图层

 cutterman切图

cutterman是综合了上面图层切图和切片切图(比较精细不用合并图层)一键导出非常方便 通过选区可以实现ps的切片切图

通过选定图层实现图层切图

 

2倍图,移动端的使用

2倍图就是像素比是   物理像素2:1 css像素  ,2倍图的作用,首先我们先说1倍图,1倍图应用在像素比是2 的移动端图片

正常设置会模糊,如果使用二倍图就刚好,显示清晰

使用      ui给的图片像素➗2就是要设置的尺寸

图片中的px指多少个发光点来显示

pc端是一个发光点=1 px

移动端是一个发光点= 2/3/4px

原型图导出android原码 原型图怎么导出图片_原型图导出android原码_02

原型图导出android原码 原型图怎么导出图片_原型图导出android原码_03


移动端开发模式       单独开发移动端页面    媒体查询公用一个页面

1   单独开发移动端页面通过js来判断什么设备访问,如果是移动端就跳转移动端页面

技术栈 rem flex 百分比布局

 2   使用响应式布局 媒体查询查询屏幕宽度改变网页 bootstrap.

bootstrap内置媒体查询,当使用container布局的时候默认大屏是1170中屏970小屏750超小屏手机自适应全屏。

布局容器container 移动端 container-fluid

栅格系统,在布局容器内把容器先划分行,每一行划分12列。因为container类是响应式的,所以列也是响应式的。

下图表示在大屏每个盒子4份中屏3分小屏两份,超小屏占全部

bootstrap要实现操作dom的操作要依赖jQuery插件,

原型图导出android原码 原型图怎么导出图片_移动端_04

 

原型图导出android原码 原型图怎么导出图片_移动端_05

移动端布局的常用方式如下

码云发布静态网站

先把代码提交到码云,然后按照如下操作,会生成 草料二维码,方便我们查看自己的静态网站

 

原型图导出android原码 原型图怎么导出图片_切图_06

原型图导出android原码 原型图怎么导出图片_原型图导出android原码_07

原型图导出android原码 原型图怎么导出图片_移动端_08

 

 

 

git 和github

把别人的项目扒过来 先点击code然后复制地址,再用git gitclone

git和github最重要的3个概念,而且是一一对应的

commit repository branch

下面是github搜索小技巧

原型图导出android原码 原型图怎么导出图片_移动端_09

下面是github对应的3个重要点

原型图导出android原码 原型图怎么导出图片_切图_10

git的命令自己把自己的仓库和github关联

原型图导出android原码 原型图怎么导出图片_原型图导出android原码_11

原型图导出android原码 原型图怎么导出图片_切图_12

原型图导出android原码 原型图怎么导出图片_移动端_13

原型图导出android原码 原型图怎么导出图片_移动端_14

 

原型图导出android原码 原型图怎么导出图片_移动端_15

 

当我们要把本地的仓库推送到github我们需要在github创建一个新仓库,不需要创建仓库的一些文件。按照上面的方式在本地操作

 

分支上的操作也需要add和commit到仓库