移动端布局 和 git-github
什么是原型图?
是问你把原型图还原成真是网页,要具备标注的知识,切图的知识。一般是把psd带有图层的图片文件用ps切图进行还原
现在的切图和标注
现在使用的是 蓝湖和摹客,下载插件到Photoshop,进行切图,也可以在Photoshop标记好要切的图,然后进入到蓝湖和摹客在线
的网站进行标注和切图,在线的网站还有生成的一些代码可以参考。这样方便开发
以前的切图 图层切图 cutterman切图
图层切图
比较复杂的一点就是带有文字和图片的多个图层同时导出为图片。方法按住shift选中多个图层 然后ctrl+e合并图层并导出
cutterman切图
cutterman是综合了上面图层切图和切片切图(比较精细不用合并图层)一键导出非常方便 通过选区可以实现ps的切片切图
通过选定图层实现图层切图
2倍图,移动端的使用
2倍图就是像素比是 物理像素2:1 css像素 ,2倍图的作用,首先我们先说1倍图,1倍图应用在像素比是2 的移动端图片
正常设置会模糊,如果使用二倍图就刚好,显示清晰
使用 ui给的图片像素➗2就是要设置的尺寸
图片中的px指多少个发光点来显示
pc端是一个发光点=1 px
移动端是一个发光点= 2/3/4px
移动端开发模式 单独开发移动端页面 媒体查询公用一个页面
1 单独开发移动端页面通过js来判断什么设备访问,如果是移动端就跳转移动端页面
技术栈 rem flex 百分比布局
2 使用响应式布局 媒体查询查询屏幕宽度改变网页 bootstrap.
bootstrap内置媒体查询,当使用container布局的时候默认大屏是1170中屏970小屏750超小屏手机自适应全屏。
布局容器container 移动端 container-fluid
栅格系统,在布局容器内把容器先划分行,每一行划分12列。因为container类是响应式的,所以列也是响应式的。
下图表示在大屏每个盒子4份中屏3分小屏两份,超小屏占全部
bootstrap要实现操作dom的操作要依赖jQuery插件,
移动端布局的常用方式如下
码云发布静态网站
先把代码提交到码云,然后按照如下操作,会生成 草料二维码,方便我们查看自己的静态网站
git 和github
把别人的项目扒过来 先点击code然后复制地址,再用git gitclone
git和github最重要的3个概念,而且是一一对应的
commit repository branch
下面是github搜索小技巧
下面是github对应的3个重要点
git的命令自己把自己的仓库和github关联
当我们要把本地的仓库推送到github我们需要在github创建一个新仓库,不需要创建仓库的一些文件。按照上面的方式在本地操作
分支上的操作也需要add和commit到仓库